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DISKLAIMER (DISCLAIMER) 


Penerbit tidak menjamin kebenaran dan keakuratan isi/informasi yang tertulis di 
dalam buku tek ini. Kebenaran dan keakuratan isi/informasi merupakan tanggung 


jawab dan wewenang dari penulis. 


Penerbit tidak bertanggung jawab dan tidak melayani terhadap semua komentar 
apapun yang ada didalam buku teks ini. Setiap komentar yang tercantum untuk 


tujuan perbaikan isi adalah tanggung jawab dari masing-masing penulis. 


Setiap kutipan yang ada di dalam buku teks akan dicantumkan sumbernya dan 
penerbit tidak bertanggung jawab terhadap isi dari kutipan tersebut. Kebenaran 
keakuratan isi kutipan tetap menjadi tanggung jawab dan hak diberikan pada 
penulis dan pemilik asli. Penulis bertanggung jawab penuh terhadap setiap 
perawatan (perbaikan) dalam menyusun informasi dan bahan dalam buku teks 
ini. 

Penerbit tidak bertanggung jawab atas kerugian, kerusakan atau 
ketidaknyamanan yang disebabkan sebagai akibat dari ketidakjelasan, 
ketidaktepatan atau kesalahan didalam menyusun makna kalimat didalam buku 


teks ini. 


Kewenangan Penerbit hanya sebatas memindahkan atau menerbitkan 
mempublikasi, mencetak, memegang dan memproses data sesuai dengan 


undang-undang yang berkaitan dengan perlindungan data. 


Katalog Dalam Terbitan (KDT) 

Teknik Komputer dan JaringanEdisi Pertama 2013 

Kementerian Pendidikan & Kebudayaan 

Direktorat Jenderal Peningkatan Mutu Pendidik & Tenaga Kependidikan, th. 
2013: Jakarta 
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KATA PENGANTAR 


Puji syukur kami panjatkan kepada Tuhan yang Maha Esa atas tersusunnya 
buku teks ini, dengan harapan dapat digunakan sebagai buku teks untuk siswa 
Sekolah Menengah Kejuruan (SMK) Bidang Studi Keahlian Teknologi 
InformasidanKomunikasi,Program Keahlian TeknikKomputerdanlJaringan. 


Penerapan kurikulum 2013 mengacu pada paradigma belajar kurikulum abad 21 
menyebabkan terjadinya perubahan, yakni dari pengajaran (teaching) menjadi 
BELAJAR (learning), dari pembelajaran yang berpusat kepada guru (teachers- 
centered) menjadi pembelajaran yang berpusat kepada peserta didik (student- 
centered), dari pembelajaran pasif (pasive learning) ke cara belajar peserta didik 
aktif (active learning-CBSA) atau Student Active Learning-SAL. 


Buku teks "Pemrograman Web"ini disusun berdasarkan tuntutan paradigma 
pengajaran dan pembelajaran kurikulum 2013diselaraskan berdasarkan 
pendekatan model pembelajaran yang sesuai dengan kebutuhan belajar 
kurikulum abad 21, yaitu pendekatan model pembelajaran berbasis peningkatan 
keterampilan proses sains. 


Penyajian buku teks untuk Mata Pelajaran "Pemrograman Web’ini disusun 
dengan tujuan agar supaya peserta didik dapat melakukan proses pencarian 
pengetahuan berkenaan dengan materi pelajaran melalui berbagai aktivitas 
proses sains sebagaimana dilakukan oleh para ilmuwan dalam melakukan 
eksperimen ilmiah (penerapan scientifik), dengan demikian peserta didik 
diarahkan untuk menemukan sendiri berbagai fakta, membangun konsep, dan 
nilai-nilai baru secara mandiri. 


Kementerian Pendidikan dan Kebudayaan, Direktorat PembinaanSekolah 
Menengah Kejuruan, dan Direktorat Jenderal Peningkatan Mutu Pendidik dan 
Tenaga Kependidikan menyampaikan terima kasih, sekaligus saran kritik demi 
kesempurnaan buku teks ini dan penghargaan kepada semua pihak yang telah 
berperan serta dalam membantu terselesaikannya buku teks siswa untuk Mata 
Pelajaran "Pemrograman Web”kelas X/Semester 2Sekolah Menengah Kejuruan 
(SMK). 


Jakarta, 12 Desember 2013 
Menteri Pendidikan dan Kebudayaan 


Prof. Dr. Mohammad Nuh, DEA 
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GLOSARIUM 


ActionScript: bahasa pemrograman mirip Javascript pada aplikasi Adobe Flash. 


Array asosiatif: jenis array yang menggunakan nama sebagai pengganti index 


untuk menunjuk data yang disimpan. 


Array: himpunan data sejenis yang disimpan dalam suatu variabel dengan index 


untuk mengakses setiap data yang tersimpan. 


Asynchronous Javascript and XML (AJAX): suatu teknologi yang 
dikembangkan untuk memungkinkan suatu proses berjalan secara asinkron 


dengan proses lainnya (multi-proses) dalam satu halaman web. 


Autocomplete: kemampuan suatu komponen melakukan pencarian dari data 


yang ada berdasarkan input dari user. 


Autofocus: atribut pengaturan fokus pada suatu elemen setelah halaman di 


load. 
Boolean: tipe untuk mewakili data dengan format benar salah. 
Border: batas yang mengelilingi padding dan content. 


Cascading Style Sheet (CSS): standar yang digunakan untuk mengatur 


tampilan suatu halaman HTML 


Case Sensitive: bentuk pernyataan yang akan membedakan antara huruf besar 


dan kecil untuk nama yang sama. 
Cols: jumlah kolom karakter yang dapat ditampilkan oleh textarea. 


Disabled: atribut untuk menonaktifkan mode entri pada suatu komponen formulir 
HTML. 


ECMAScript: Nama lain untuk menyatakan standar Javascript. 


Embedded style sheet: CSS yang ditempatkan dalam tag <style>. 
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Event: sebutan dari satu aksi yang dilakukan oleh user atau dapat juga berasal 


dari browser untuk diolah oleh aplikasi. 


External style sheet: CSS yang ditempatkan pada file tersendiri, umumnya file 


dengan ekstensi *.css. 
Fungsi: kumpulan program untuk menjalankan suatu proses tertentu. 
Inline style sheet: CSS yang ditempatkan pada suatu elemen HTML. 


Java: bahasa pemrograman untuk pengembangan aplikasi lintas platform 


menggunakan mesin virtual Java. 
Javascript: bahasa pemrograman untuk pengolahan halaman HTML 


Komentar program: bagian dari program yang tidak akan dieksekusi interpreter 


ataupun compiler. 


Komponen checkbox: komponen formulir HTML untuk menentukan beberapa 


pilihan dari yang ada. 


Komponen datalist: komponen formulir HTML untuk menampilkan data lebih 


dari dengan dukungan autocomplete. 
Komponen input file: komponen formulir HTML untuk pengiriman file. 


Komponen input image: komponen formulir HTML untuk membuat tombol dari 


gambar. 


Komponen radio button: komponen formulir HTML untuk memilih satu dari 


sekian pilihan. 


Komponen select: komponen formulir HTML untuk menampilkan lebih dari satu 


pilihan. 


Margin: daerah paling diluar yang membatasi dengan elemen HTML yang 


lainnya dan tidak berwarna. 
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Multi-purpose Internet Mail Extensions (MIME): perluasan standar email, 
sekarang juga digunakan secara meluas untuk standar lainnya di internet, untuk 
mendukung pengiriman data dengan format teks selain ASCII, non-teks dan 


penerapan banyak format dalam satu file (multipart message bodies). 


Notasi camel case: notasi penamaan yang menggunakan huruf kapital pada 


setiap kata-nya tanpa mengandung spasi. 


Notasi hungaria: notasi penamaan yang memberikan awalan berupa jenis data 


yang akan ditampung oleh suatu variabel. 
Padding: area yang mengelilingi content. 


Pemrograman berorientasi obyek: pemrograman yang menggambarkan suatu 
aplikasi sebagai interaksi antar obyek seperti yang terjadi dalam kehidupan 


sehari-hari. 


Property: bagian CSS untuk menunjuk detail modifikasi yang akan dilakukan 


pada suatu elemen HTML. 
Pustaka: kumpulan konstanta, fungsi, kelas atau obyek dalam pemrograman. 
Rows: jumlah baris teks yang dapat ditampilkan oleh textarea. 


Selector: elemen HTML, yang ditunjuk melalui atribut class, ID atau nama tag, 


yang akan dimodifikasi tampilannya oleh CSS. 
String: tipe untuk mewakili format data yang berupa kumpulan karakter. 


Struktur percabangan: struktur program yang memiliki kondisi tertentu untuk 


menjalankan alur yang berbeda. 


Struktur perulangan: struktur program yang memungkinkan suatu kumpulan 


perintah dijalankan berkali-kali dengan terpenuhinya suatu kondisi. 


Textarea: komponen formulir HTML untuk menampung teks yang panjang. 
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World Wide Web Consortium (W3C): organisasi internasional yang mengatur 


standar aplikasi yang berhubungan dengan teknologi web. 


Wrap: atribut pengemasan teks pada komponen textarea. 
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PETA KEDUDUKAN BAHAN AJAR 


Peta kedudukan bahan ajar merupakan suatu diagram yang menjelaskan 
struktur mata pelajaran dan keterkaitan antar mata pelajaran dalam satu 
kelompok bidang paket keahlian. Gambar 1 menjelaskan peta kedudukan bahan 
ajar untuk paket keahlian rekayasa perangkat lunak . Gambar 1 menjelaskan 
peta kedudukan bahan ajar untuk paket keahlian rekayasa perangkat lunak . 
Kelompok C1 merupakan kelompok mata pelajaran wajib dasar bidang kejuruan. 
C2 merupakan kelompok mata pelajaran wajib dasar kompetensi kejuruan dan 
C3 merupakan kelompok mata pelajaran wajib paket keahlian. 


Kerja Proyek 










C3 : Rekayasa Perangkat Lunak 




























Pemrograman ñ i i 
Perangkat икана emrograman Administrasi 
Bergerak Desktop Gra Basis Data 









Pemrograman 
Berorientasi obyek 
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Gambar 1. Peta Kedudukan Bahan Ajar Kelompok C2 
Mata Pelajaran Pemrograman Web 
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Pemrograman 
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Sementara itu peta konsep mata pelajaran menjelaskan struktur urutan 


kegiatan belajar dan topik materi pelajaran. Gambar 2 dibawah ini menjelaskan 


peta konsep mata pelajaran Pemrograman web untuk kelas X semester 2. 
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Gambar 2. Peta Konsep Mata Pelajaran Pemrograman Web Kelas X Semester 2 
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BAB 1 PENDAHULUAN 


A.Diskripsi 

Pemrograman web 2 merupakan salah satu mata pelajaran wajib dasar 
pada dasar program keahlian Teknik Komputer dan Informatika (TKI). 
Berdasarkan struktur kurikulum mata pelajaran Pemrograman web 2 
disampaikan dikelas X semester 2 yang disampaikan dalam waktu 4 jam 
pelajaran per minggu. 

Pada semester 2 ini materi pemrograman web ditekankan pada perintah- 
perintah lanjut pada HTML untuk pembuatan halaman dan perintah — perintah 
menggunakan java script. Perintah HTML yang diajarkan pada pemrograman 
web 2 ini meliputi pembuatan komponen formulir serta pemberian style pada 
suatu halaman web. 

Untuk materi java script meliputi teknik pemrograman halaman web , 
pengolahan input user. Pada teknik pemrograman halaman web akan 
dijelaskan lebih lanjut tentang anatomi dan cara kerja kode javascript, dasar 
pemrograman client (variabel, tipe data, operator), array dimensi 1 dan 
multidimensi, struktur kontrol percabangan pada program client, struktur kontrol 
perulangan pada program client, fungsi bawaan dan buatan user pada program 


client. 


B.Prasyarat 

Untuk kelancaran pencapaian kompetensi dalam mata pelajaran 
pemrograman web ini dibutuhkan beberapa peryaratan baik pengetahuan 
maupun ketrampilan dasar. Persyaratan tersebut antara lain ialah: peserta didik 
mempunyai kompetensi dalam hal pemanfaatan teknologi informasi, seperti 
mengoperasikan hardware komputer dan mengoperasikan perangkat lunak 
aplikasi. Perangkat lunak aplikasi tersebut antar lain ialah pengolah data untuk 
menganalisis data hasil eksperimen, pengolah kata untuk membuat laporan dan 
aplikasi presentasi untuk mengkomunikasikan dan mempresentasikan hasil 


laporan. 
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C.Petunjuk 

Buku pedoman siswa ini disusun berdasarkan kurikulum 2013 yang 
mempunyai ciri khas penggunaan metode scientific. Buku ini terdiri dari dua bab 
yaitu bab satu pendahuluan dan bab dua pembelajaran. Dalam bab 
pendahuluan beberapa yang harus dipelajari peserta didik adalah diskripsi mata 
pelajaran yang berisi informasi umum, rasionalisasi dan penggunaan metode 
scientifik. Selanjutnya pengetahuan tentang persyaratan, tujuan yang 
diharapkan, kompetensi inti dan dasar yang akan dicapai serta test kemampuan 
awal. 

Bab dua menuntun peserta didik untuk memahami deskripsi umum 
tentang topik yang akan dipelajari dan rincian kegiatan belajar sesuai dengan 
kompetensi dan tujuan yang akan dicapai. Setiap kegiatan belajar terdiri dari 
tujuan dan uraian materi topik pembelajaran, tugas serta test formatif. Uraian 
pembelajaran berisi tentang diskripsi pemahaman topik materi untuk memenuhi 
kompetensi pengetahuan. Uraian pembelajaran juga menjelaskan deskripsi 
unjuk kerja atau langkah-langkah logis untuk memenuhi kompetensi skill. 

Tugas yang harus dikerjakan oleh peserta didik dapat berupa tugas praktek, 
eksperimen atau pendalaman materi pembelajaran. Setiap tugas yang 
dilakukan melalui beberapa tahapan scientifik yaitu : 1) melakukan pengamatan 
setiap tahapan unjuk kerja 2) melakukan praktek sesuai dengan unjuk kerja 3) 
mengumpulkan data yang dihasilkan setiap tahapan 4) menganalisa hasil data 
menggunakan analisa diskriptif 5) mengasosiasikan beberapa pengetahuan 
dalam uraian materi pembelajaran untuk membentuk suatu kesimpulan 6) 
mengkomunikasikan hasil dengan membuat laporan portofolio. Laporan 
tersebut merupakan tagihan yang akan dijadikan sebagai salah satu referensi 


penilaian 


D.Tujuan Akhir 
Setelah mempelajari uraian materi dalam bab pembelajaran dan kegiatan 
belajar diharapkan peserta didik dapat memiliki kompetensi sikap, pengetahuan 
dan ketrampilan yang berkaitan dengan materi: 


e Format formulir halaman web 
e Style halaman web 
e Teknik pemrograman web 
e Akses Komponen web 
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E.Kompetensi inti dan kompetensi dasar 

1. Kompetensi Inti 1 : Menghayati dan mengamalkan ajaran agama yang 
dianutnya. 

Kompetensi Dasar : 

1.1. Memahami nilai-nilai keimanan dengan menyadari hubungan 
keteraturan dan kompleksitas alam dan jagad raya terhadap kebesaran 
Tuhan yang menciptakannya 

1.2. Mendeskripsikan kebesaran Tuhan yang menciptakan berbagai 
sumber energi di alam 

1.3. Mengamalkan nilai-nilai keimanan sesuai dengan ajaran agama dalam 
kehidupan sehari-hari. 

2. Kompetensi Inti 2: Menghayati dan Mengamalkan perilaku jujur, disiplin, 
tanggung jawab, peduli (gotong royong, kerjasama, toleran, damai), santun, 
responsif dan proaktif dan menunjukan sikap sebagai bagian dari solusi atas 
berbagai permasalahan dalam berinteraksi secara efektif dengan lingkungan 
sosial dan alam serta dalam menempatkan diri sebagai cerminan bangsa 
dalam menempatkan diri sebagai cerminan bangsa dalam pergaulan dunia. 
Kompetensi Dasar: 

21. Menunjukkan perilaku ilmiah (memiliki rasa ingin tahu, objektif, jujur: 
teliti: cermat, tekun: hati-hati, bertanggung jawab: terbuka, kritis: 
kreatif, inovatif dan peduli lingkungan) dalam aktivitas sehari-hari 
sebagai wujud implementasi sikap dalam melakukan percobaan dan 
berdiskusi 

2.2. Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari 
sebagai wujud implementasi melaksanakan percobaan dan 
melaporkan hasil percobaan. 

3. Kompetensi Inti 3: Memahami,menerapkan dan menganalisis pengetahuan 
faktual, konseptual dan prosedural berdasarkan rasa ingintahunya tentang 
ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam wawasan 
kemanusiaan, kebangsaan, kenegaraan, dan peradaban terkait penyebab 
fenomena dan kejadian dalam bidang kerja yang spesifik untuk 
memecahkan masalah. 


Kompetensi Dasar: 
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3.6. Memahami format formulir pada halaman web 
3.7. Memahami style pada halaman web 
3.8. Memahami teknik pemrograman pada halaman web 
4. Kompetensi Inti 4: Mengolah, menalar, dan menyaji dalam ranah konkret dan 
ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di 
sekolah secara mandiri, dan mampu melaksanakan tugas spesifik dibawah 
pengawasan langsung. 
Kompetensi Dasar: 
4.6. Menyajikan formulir pada halaman web 
4.7. Menyajikan style tertentu pada halaman web 
4.8. Menyajikan teknik-teknik dalam pemrograman web 
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BAB 2 PEMBELAJARAN 


A. Diskripsi 

Pemrograman web 2 merupakan salah satu mata pelajaran wajib dasar 
pada dasar program keahlian Teknik Komputer dan Informatika (TKI). 
Berdasarkan struktur kurikulum mata pelajaran Pemrograman web 2 
disampaikan dikelas X semester 2 yang disampaikan dalam waktu 4 jam 
pelajaran per minggu. 

Pada semester 2 ini materi pemrograman web ditekankan pada perintah- 
perintah lanjut pada HTML untuk pembuatan halaman dan perintah — perintah 
menggunakan java script. Perintah HTML yang diajarkan pada pemrograman 
web 2 ini meliputi pembuatan komponen formulir serta pemberian style pada 
suatu halaman web. 

Untuk materi java script meliputi teknik pemrograman halaman web , 
pengolahan input user. Pada teknik pemrograman halaman web akan 
dijelaskan lebih lanjut tentang anatomi dan cara kerja kode javascript, dasar 
pemrograman client (variabel, tipe data, operator), array dimensi 1 dan 
multidimensi, struktur kontrol percabangan pada program client, struktur kontrol 
perulangan pada program client, fungsi bawaan dan buatan user pada program 


client. 
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B. Kegiatan Belajar 








a. Tujuan Pembelajaran. 
Setelah mengikuti kegiatan belajar 1 ini siswa diharapkan dapat : 
1) Memahami komponen entri teks 


2) Menyajikan komponen entri teks ke dalam sebuah halaman web 


b. Uraian materi. 

Form HTML digunakan untuk memilih pelbagai macam inputan yang 
disediakan. Data bisa diinputan dalam bentuk textarea, input teks , pilihan radio 
button, check box dan lain sebagainya. Bentuk inputan tersebut dikemas 
elemen dalam tag-tag form. Pada kegiatan belajar ini akan mempelajari inputan 


text. 


1) Komponen text area multiline 

Komponen text area merupakan area tempat untuk menyimpan text atau tulisan 
baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk 
menampilkan text dalam bentuk dan format text. 

Untuk menampung input teks yang panjang dan mungkin tersusun atas lebih 
dari 1 baris, maka digunakan komponen input 'textarea'. TEXTAREA dapat 
digabungkan dengan tag FORM untuk menjadi inputan yang akan diolah oleh 
file pemroses sebagaimana seperti yang telah dijelaskan pada tag FORM 
tersebut. 


Format umum penulisan text area multiline 


<textarea atribute="atribute"> 


Terdapat beberapa atribut dari text area, diantaranya row,col dan lain 


sebagainya. Pada HTML 5 menyediakan banyak 6 atribut baru textarea. 


Atribut Value Keterangan 


Autofocus autofocus Area tertentu pada text area, dimana 
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>baru dihtml 5 kursor y otomatis mengarah ke daerah 
tersebut ketika halaman web diload. 

Cols number Menentukan lebar text area 

Disabled disabled Text area dapat diubah 

Form form_id Satu atau lebih form pada text area 

> baru dihtml 5 Menentukan panjang karakter pada text 
area 

Maxlength Number Menentukan panjang karakter pada text 

>baru dihtml 5 area 

Name text Nama dari text area 

Placeholder text Memberikan gambaran singkat tentang 

> baru dihtml 5 nilai pada tex tarea 

Readonly readonly Text area bersifat read-only 

Required required Menentukan text area tersebut harus diisi 

>baru dihtml 5 atau tidak. 


number Menentukan tinggi text area 


Wrap hard Menentukan bagaimana cara teks 


> baru dihtml 5 soft dikemas dalam text area sebelum teks 


tersebut dikirimkan 





NAME 

Atribut ini digunakan untuk meemberikan nama dari TEXTAREA. Atribut ini 
akan sangat berguna jika tag TEXTAREA digabungkan dengan tag FORM. 
NAME 

Atribut ini digunakan untuk meemberikan nama dari TEXTAREA. Atribut ini 
akan sangat berguna jika tag TEXTAREA digabungkan dengan tag FORM. 
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Contoh penulisan : 
<!DOCTYPE html> 
<html> 


<head> 





<title>cek form </title> 

</head> 

<body> 

<p> Silahkan diisi pada teks area yang tersedia</p> 
<p><textarea NAME="papantulis” COLS=40 ROWS=6> 
</textarea></p> 

</body> 

</html> 


Bila listing kode diatas dijalankan akan menghasilkan tampilan pada halaman 
web seperti berikut : 


x 





a Side: //AS: Prampp)/hidoes/ Buku Wweb/cek Pim 
Silahkan desi pada teks area yang tersedia 





Gambar 1.1 penerapan textarea dengan atribut name 


COLS 
Atribut COLS digunakan untuk menentukan lebar dari TEXTAREA. Contoh 


berikut menampilkan 3 komponen textarea dengan lebar textarea bervariasi : 


ADOS nie 
<a ml = 


<head> 





<title>cek form </title> 
</head> 
<body> 
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<p> Silahkan diisi pada teks area yang tersedia</p> 
<TEXTAREA NAME="rendah" COLS=30 ROWS=5></TEXTAREA> 
<TEXTAREA NAME="sedang" COLS=30 ROWS=10></TEXTAREA> 
<TEXTAREA NAME="tinggi" COLS=30 ROWS=20></TEXTAREA> 
</body> 
</html> 


Bila listing kode diatas dijalankan akan menghasilkan tampilan pada halaman 
web seperti berikut : 


fie IC eng t'ika fh kuwa takik Pam 


Shae о bata jaha was A riechen 








4 


Gambar 1.2 penerapan textarea dengan atribut rows 


READONLY 
Atribut ini digunakan agar tulisan yang terdapat didalam TEXT AREA hanya 
dapat dibaca dan disalin tapi tidak dapat diubah. 
Contoh : 
СОЕ Еш ЕЕ ШЕ ЕЕ 
<html> 
<head> 
<title>cek form </title> 
</head> 
<body> 
<TEXTAREA NAME="untukdibaca” COLS=40 ROWS=6 READONLY> 
Tulisan ini tidak dapat diubah tapi bisa disalin. 
</TEXTAREA> 
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</body> 
</html> 


Bila listing kode diatas dijalankan akan menghasilkan tampilan pada halaman 
web seperti gambar dibawah ini. Bila kursor diarahkan ke textarea maka kursor 
tidak bisa aktif dan tidak bisa mengedit tulisan yang berada dalam textarea, 


hanya bisa dibaca saja. 


сез Form 





Ç fila: /1/C: xampphidocs BukuWeb/oek htm 





| 
| 


Tulisan ini tidak dapat diubah tapi bima 
disalin. 





Gambar 1.3 penerapan textarea dengan atribut readonly 


DISABLED 

Atribut ini digunakan agar tulisan yang terdapat didalam TEXTAREA tidak dapat 
disalin dan diubah. 

Contoh : 


<!DOCTYPE html> 
<html> 


<head> 





<title>cek form </title> 

</head> 

<body> 

<TEXTAREA NAME="terlarang” COLS=40 ROWS=6 DISABLED> 
Tulisan ini tidak dapat disalin maupun diubah. 
</TEXTAREA> 

</body> 

</html> 
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Maka hasilnya akan terlihat seperti berikut ini, 


cek form 


с file: ///C: Aampp/htdocs/BukuWeb /cek htm 





Tulisan ini tidak dapar disalin maupun 


diubah. 





Gambar 1.4 penerapan textarea dengan atribut disabled 


2) Komponen input text password 

Komponen input text password bertanggung jawab untuk memasukan data 
password. Dari atribut-atribut tersebut, yang utama dan terutama harus 
disesuaikan atau diberi nama sesuai dengan item datanya adalah atribut 
'name', karena file yang dituju pada atribut action di tag form, yang biasanya 
adalah file server side scripting (PHP) akan mengambil input dari form 
berdasarkan atribut nama (‘name’) dari komponen input form 
tersebut.Disamping tipe text, terdapat pula tipe input teks yang lain, yakni 
‘password’. Input tpe ‘password’ ini akan menghasilkan input dengan notasi ’e’. 
Biasanya input tipe ‘password’ digunakan dalam form untuk masukan kata 
kunci atau password dari pengguna di dalam form login.Format dari elemen 


input text password HTML-nya adalah sebagai berikut : 


input type=password name=name> 
input type=password name=name maxlength=length> 


input type=password name=name size=size> 


KR K K& АЛ 





input type=password name=name value=value> 


Berikut adalah penggalan listing program penulisan form input password, 


dimana form diberi nama=pwd dengan panjang maximal karakternya adalah 6. 
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<!doctype html> 
<html> 


<head> 





<title>penulisan password </title> 

</head> 

<body> 

<form > 

Password: <input type="password" name="pwd" maxlength="6"> 
</form> 

</body> 

</html> 


Contoh hasil kompilasi dari listing diatas : 
# penulisan password 


Password: ТГ 


Gambar 1.5 form input password 


3) Komponen input text 
Komponen input text merupakan komponen untuk memasukan data text ke 


server dalam bentuk textfield.Format tag HTML-nya adalah sebagai berikut : 


ЕЗІПТЕШ NAME АТ > 
<INPUT ТҮРЕ-ТЕХТ NAME=name MAXLENGTH=length> 
<INPUT TYPE=TEXT NAME=name SIZE=size> 





<INPUT TYPE=TEXT NAME=name VALUE=value> 


Berikut contoh listing program yang menggunakan form input 


Contoh bentuk tampilannya adalah sebagai berikut : 


<!doctype html> 
<html> 


<head> 





<title>input text</title> 
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</head> 


<body> 

<form> 

Nama : <input type="text" name="nama"><br> 
Sekolah : <input type="text" name="sekolah"> 
</form> 

</body> 

</html> 


@ соле | 


Nama : | 
Sekolah : | 


Gambar 1.6 form input text 


4) Form menggunakan input hidden 
Format tag form input hidden HTML-nya adalah sebagai berikut : 


<INPUT TYPE=HIDDEN NAME=name VALUE=value> 


Pada format form input hidden ditandai dengan atribut form type =hidden pada 
tag <input>, yang artinya ada form inputan yang disembunyikan atau tidak tidak 
tampilkan. Untuk selengkapnya dapat dilihat pada program berikut 

Bila listing program diatas dijalankan dibrowser akan menghasilkan tampilan 


sebagai berikut : 


<!doctype html> 
<html> 


<head> 





<title>hidden input file </title> 
</head> 
<body> 
<form > 


„ 


Nama : <input type=" name="fnama”><br> 
<input type="hidden” name="negara” value="Indonesia”> 
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<input type="submit” value="Submit”> 
</form> 
</body> 
</ hemi 


89| -| нозо ера не x | 
Nama | 


Submit 


Gambar 1.7 hasil form input dengan hidden 


Bila tag type="hidden” dihilangkan maka pada <input type="hidden”> maka 
menghasilkan tampilan sebagai berikut : 


<ОТ ӘР > 


Nama : <input type="text” name="fnama”><br> 


<input name="negara” value="Indonesia”> 


<input type="submit” value="Submit”> 


< se ram 





Gambar 1.8 hasil form input tanpa atribut hidden 


5) Pembuatan form biodata dengan input text 
Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang 


sederhana : 


<html> 

<head> 

<title> Form ЗИ itle- 

</head> 

<body> 

<form name="forml” method="POST” action="inputdata.php”> 
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Nama : <input type="text" name="nama"><br><br> 

Kelas: <input type="text" name="kelas" 
maxlength="2"><br><br> 

No : <input type="text" name="nomor" 


value="10"><br><br> 





Hobby: <input type="text" name="hobby" 
size="8"><br><br> 

Password: <input type="password" name="password"> 
Слар < o 
<input type="submit" name="submit" 
value="Submit">&nbsp; &nbsp; &nbsp; <input type="reset" 
neme=" reser" value=" Reset "> 
</form> 
</body> 
</html> 


Apabila dibuka di dalam browser, maka tampilan dari susunan kode HTML di 


atas adalah sebagai berikut : 


Hobby 
Password: 


Submit | | Reset 


Gambar 1.9 pembuatan form input text sederhana 


6) Pembuatan form dengan elemen fieldset 
Berikut adalah contoh pembuatan form dengan menggunakan elemen fielsdet 


serta input form : 
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Bila listing code diatas dijalankan akan menghasilkan tampilan sebagai berikut : 
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А1 х] 
|е manana lr A 0 
пы 00 Ма faote Пан Make 
итек 2 -222---- с оте 
IM a+ 





ілақ tasa DENTAL AC 
Поне u = 
Arya 


Buat Account Bars 


Mark dengan Facebook ama mood 


a My Conga EA < | 





Gambar 1.10 pembuatan form input fieldset 


c. Rangkuman. 

Pada kegiatan belajar menyajikan komponen entri teks dapat disimpulkan 

menjadi beberapa point penting seperti berikut : 

= Data bisa diinputan dalam bentuk textarea, input teks , pilihan radio button, 
check box dan lain sebagainya 

= Komponen text area merupakan area tempat untuk menyimpan text atau 
tulisan baru 

= Atribut — atribut pada textarea diantaranya, autofocus, cols, disabled, form, 
maxlength, name, placeholder, readonly, required, rows, wrap 

= Komponen input text password bertanggung jawab untuk memasukan data 
password. 

= Komponen input text merupakan komponen untuk memasukan data text ke 
server dalam bentuk textfield 

= Pada format form input hidden ditandai dengan atribut form type = hidden 
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d. Tugas. 


Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam 
kegiatan ini masing-masing kelompok kerjakan tugas berikut : 


1. Buatlah form dengan menggunakan seperti berikut ini 


2. Buatlah form dengan menggunakan elemen fieldset seperti contoh berikut ini 


3. Kemudian secara bergantian masing-masing kelompok mempresentasikan 
hasilnya didepan kelas. 


Page | 19 


Pemrograman Web 





== 


Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap 


e. Tes Formatif. 


butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah 
jawabannya pada lembar jawaban test formatif yang telah disediakan. 

1. Jelaskan tentang 6 atribut baru pada komponen textarea html5 ? 

2 Bagaimana format penulisan untuk pembuatan textarea multiline ? 
3.Bagaimana format penulisan input password ? 


4. Bagaimana format penulisan input text hidden ? 


f. Lembar Jawaban Tes Formatif. 
LJ- 01 : 6 atribut baru pada komponen textarea html5 
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LJ- 03 : format penulisan input password 


g. Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 
Setelah mengikuti kegiatan belajar 2 diharapkan peserta didik dapat : 
1) Memahami komponen entri pilihan 
2) Menyajikan komponen entri pilihan ke dalam sebuah halaman 
Web 


b. Uraian materi. 
Form HTML digunakan untuk memilih pelbagai macam inputan yang 
disediakan. Data bisa diinputan dalam komponen entri pilihan, diantaranya 


input file, radio button, chexbox, select serta datalist. 


1.) Komponen input file 


Komponen input file berfungsi untuk memasukan data file yang dibutuhkan 
kedalam sistem web yang dibuat. Format tag HTML-nya adalah sebagai 
berikut : 


<input type-file name-name accept-mime type list» 


Name- “name” merupakan pemberian nama pada komponen input sebagai 
nama dari komponen. Karena pada saat sistem web dijalankan maka data yang 
diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama 


komponen input tersebut. Contoh bentuk tampilannya adalah sebagai berikut : 


<!doctype html> 

<html> 

<head> 

ОБЕ о оа е и зеке 

</head> 

<body> 

<font face="Courier New, Courier, mono">---- Tambahkan 
File KRS! === </font><br> 

<form > 

<input type="file" name="pic" accept="image/*"> 
</form> 

</body> 
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</html> 


Listing kode diatas menghasilkan tampilannya sebagai berikut : 


Bros ie | 


---» Tambahkan File XRS --- 
Browse... | 


Gambar 2.1 hasil form input file 


Bila dklik browse maka akan muncul kotak dialog untuk mencari file, seperti 
berikut : 


Ai reel Serat Sar trgg badan rate 
зай ж e b Lahan Surat Tae 
Carera Para 
еі 2412 
Wiesen Gore 





Gambar 2.2 file upload dari form input 


2.) Komponen radio button 
Pada form input radio button hanya ada satu pilihan yang terseleksi,tidak bisa 
digunakan untuk multiple answer. Format umum tag HTML dari Form Input 


Radio Button adalah sebagai berikut : 


<input type=radio name=name value=value> 
<input type=radio name=name value=value checked> 


Name= “name” merupakan pemberian nama pada komponen input sebagai 
nama dari komponen. Karena pada saat sistem web dijalankan maka data yang 
diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama 
komponen input tersebut. Berikut adalah penggalan listing program penulisan 


form input radio button 
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Yang perlu diperhatikan pada penggunaan input radio adalah bahwa atribut 


nama (name) dari komponen dari input tersebut harus sama. Contoh bentuk 


tampilannya adalah sebagai berikut : 


= 
575 | 


Tingkat Pendidikan : 
C sp 

C SMP 

C SMA sederajat 
C D3 

CSI 


С 53 


Gambar 2.3 tampilan radio button 
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LE 


Komponen chexbox memiliki fungsi yang hampir sama dengan radio button, 


3) Komponen chexbox 


yaitu untuk menentukan pilihan. Namun pada chexbox dapat digunakan untuk 


memilih lebih dari satu jawaban (multi answer). 


Atau bisa dikatakan bahwa komponen input checkbox digunakan sebgai 
masukan untuk data atau nilai pilihan dengan alternatif jawaban lebih dari 1 
opsi pilihan. Tampilan dari komponen input ini berupa kotak yang dapat diberi 
tanda centang/contreng. Jenis input ini biasa digunakan untuk memasukkan 
data pilihan yang pilihannya bisa lebih dari satu, seperti hobby, makanan, dan 


lain-lain. Format tag HTML-nya adalah sebagai berikut : 


A 


input type=checkbox name=name value=value> 











UN 


input type=checkbox name=name value=value checked> 


Setiap komponen input harus diberikan nama (name) yang berbeda karena 
data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari 
nama komponen input tersebut. Nilai dari komponen checkbox berupa nilai 
boolean, yakni true apabila dicentang dan false apabila input pilihan tersebut 
tidak dicentang. 

Berikut ini adalah contoh penerapan dari format form input check box 
<!doctype html> 


<html> 
<head> 


<title>FORM INPUT</title> 


</head> 

AN CAN = 

<form> 

<input type="checkbox" name="vehicle" value-" Sakit " 
>Sakit<br> 


<input type="checkbox" name-"vehicle" 
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Listing kode diatas menghasilkan tampilannya sebagai berikut : 











Gambar 2.4 hasil form input checkbox 


4) Komponen Input Image 

Komponen input image bertujuan untuk memasukan file gambar yang 
dibutuhkan oleh sistem web, misalnya saja file gambar foto.jpg. Format tag 
HTML dengan atribut image adalah sebagai berikut : 


Name- “name” merupakan pemberian nama pada komponen input sebagai 
nama dari komponen. Karena pada saat sistem web dijalankan maka data yang 
diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama 
komponen input tersebut. Sedangkan type-image merupakan tipe file yang 
dapat dimasukan dalam sistem. Berikut adalah salah satu contoh form Input 


Image dengan atribut image 
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== 


<body> 
<form > 


Nama depan : <input type="text" name="fname"><br> 





Nama belakang: <input type="text" name="lname"><br> 


SAUS MS сыя әз no S le SU BI ea 








width="50" height="50"> 
</form> 
</body> 


</html> 


Bila listing program diatas di jalankan di browser 
(http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_image) 


akan menghasilkan tampilan sebagai berikut : 


Nama depan | 


Nama belakang | 


© 


Gambar 2.5 form input image 


5) Komponen select 

Komponen input dengan tipe ‘select’ adalah komponen input dengan banyak 
pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan. 
Istilah lain dari bentuk komponen ini adalah combo box atau list box. Contoh 
penggunaan komponen ini adalah pemilihan data agama, jurusan, pekerjaan, 
dan sebagainya. Format umum Penulisan komponen select adalah sebagai 
berikut : 


<select name="name”> 








<option value="nilail"> nilail </option> 
<option value=" nilai2"> nilai2 </option> 
<option value=" nilai3"> nilai3 </option> 
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Name= “name” merupakan pemberian nama pada komponen input select 
sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka 
data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari 
nama komponen input tersebut. Sedangkan value-”nilai” merupakan nilai dari 
setiap pilihan yang diberikan. 

Berikut ini adalah contoh penggunaan dari komponen input bertipe “select : 
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Hasil dari halaman form di atas adalah sebagai berikut : 


matemahka 


kimia 


biologi 
fisika 





Gambar 2.5 komponen form select 


6) Komponen datalist 

Komponen datalist merupakan elemen form baru pada HTML5. Datalist 
digunakan untuk membuat daftar list. Komponen datalist memberikan dukungan 
autocomplete dasar untuk pilihan pada field input. Komponen datalist 
merupakan pengabungan antara list dan field input dengan atribut 
autocomplete. Saat membuat pilihan pada datalist, bila terdapat huruf/item 
yang sama dengan data pada data list maka akan muncul item yang cocok 
(fungsi autocomplete bekerja). 


Format umum Penulisan komponen datalist adalah sebagai berikut : 





Berikut ini adalah contoh penggunaan dari komponen input datalist 





Page | 30 


Pemrograman Web 








Bila listing kode diatas dijalankan maka akan menghasilkan tampilan seperti 
dibawah ini. Pada saat textfield diketikan huruf “C” maka akan muncul pilihan 
“chrome” dimana kata “chrome” menggandung unsur huruf “C” hal ini 


menandakan fungsi autocompletenya berjalan. 





e 


Gambar 2.7 komponen form datalist 


7) Contoh Pembuatan Form dengan elemen entri pilihan 
Berikut adalah listing kode untuk membuat form menggunakan elemen entri 
pilihan, textarea 
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Pemrograman Web 








Bila listing kode diatas dijalankan akan menghasilkan tampilan form dilengkapi 
elemen entri pilihan seperti gambar dibawah ini. 





Gambar 2.8 elemen form entri pilihan 


8) Pembuatan form dengan elemen entri pilihan dan elemen fieldset 
Berikut adalah listing kode untuk membuat form menggunakan elemen entri 
pilihan, textarea dan fieldset. 
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«ПЕ 


Bila listing kdoe diatas jalankan akan menghasilkan tampilan sebagai berikut : 





Pengatur an pada Para 


с fihe: //AS: Prampp/htdoes/BukuWebiformPisisetrad 


m Tentang Аға 


Nama Lengkap 
Alamat 
Tuliskan pesan Anda 


disini 
Peran dan Kesan | 


Gambar 2.9 elemen form entri dan fieldset 


c. Rangkuman. 


Pada kegiatan belajar menyajikan komponen entri pilihandapat disimpulkan 


menjadi beberapa point penting seperti berikut : 


Data bisa diinputan dalam komponen entri pilihan, diantaranya input file, 
radio button, chexbox, select serta datalist. 

Komponen input file berfungsi untuk memasukan data file yang 
dibutuhkan kedalam sistem web yang dibuat 

Format tag HTML input file adalah sebagai berikut : <input type=file 
name-name accept-mime type list» 

Pada form input radio button hanya ada satu pilihan yang terseleksi 
Format tag HTML input radio button adalah sebagai berikut «input 
type=radio name=name value=value> 

komponen input checkbox digunakan sebgai masukan untuk data atau 
nilai pilihan dengan alternatif jawaban lebih dari 1 opsi pilihan. 

Format tag HTML input checkbox adalah sebagai berikut <input 
type=checkbox name=name value=value> 

Komponen input image bertujuan untuk memasukan file gambar yang 


dibutuhkan oleh sistem web, misalnya saja file gambar foto.jpg. 
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== 


= Format tag HTML dengan atribut image adalah sebagai berikut : <input 


type=image name=name src="url"> 

= Komponen input dengan tipe 'select' adalah komponen input dengan 
banyak pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif 
opsi pilihan 

= Komponen datalist memberikan dukungan autocomplete dasar untuk 
pilihan pada field input 

= Name- “name” merupakan pemberian nama pada komponen input 
select sebagai nama dari komponen. Karena pada saat sistem web 
dijalankan maka data yang diolah di dalam pemrograman adalah 


berdasarkan nilai (value) dari nama komponen input tersebut. 


d. Tugas. 


Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam 
kegiatan ini masing-masing kelompok kerjakan tugas berikut : 


1. Buatlah form dengan menggunakan seperti berikut ini 


Comment as: Select peofte М 


2. Buatlah form dengan menggunakan elemen fieldset seperti contoh berikut ini 
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Мата 
КТР 

Kelamin flaki-laki =] 
TTL 


Agama [islam 4 
Status (kawin >] 


| Browse | Simpan | 


3. Kemudian secara bergantian masing-masing kelompok mempresentasikan 
hasilnya didepan kelas. 


e. Tes Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap 
butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah 
jawabannya pada lembar jawaban test formatif yang telah disediakan. 

1. Jelaskan fungsi dan format penulisan komponen input file 

2. Jelaskan fungsi dan format penulisan komponen radio button 
3. Jelaskan fungsi dan format penulisan komponen chexbox 
4 


Jelaskan fungsi dan format penulisan komponen datalist 


f. Lembar Jawaban Tes Formatif. 


LJ- 01 : komponen input file 
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Lembar Kerja Siswa. 
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a. | Tujuan Pembelajaran. 
Setelah mengikuti kegiatan belajar 3 ini siswa diharapkan dapat : 
1) Mengetahui penggunaan cascading style sheet 
2) Memahami anatomi cascading style sheet 
3) Mengetahui cara kerja cascading style sheet 


4) Memahami cara kerja cascading style sheet 


b. Uraian materi. 

1) Definisi dan fungsi cascading style sheet 

Cascading Style Sheet atau lebih sering disebut dengan istilah CSS 
merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya 


(style) tampilan website. 


CSS bukanlah sebuah bahasa pemrograman, melainkan sebuah aturan untuk 
mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, 
seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web. 
CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak, 
bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen 
HTML. Dapat dikatakan bahwa CSS merupakan pengembangan dari HTML 
dalam hal format dokumen web. Adanya CSS memudahkan kita untuk 
mengatur dan memilih sebuah website dan tampilannya karena CSS 
memisahkan antara bagian presentasi dan isi dari web yang dibuat. 
Selain itu dengan penggunaan dari CSS dalam pembuatan web akan 
memberikan beberapa manfaat seperti berikut ini : 
. Kode HTML menjadi lebih sederhana dan lebih mudah diatur. 
° Ukuran file menjadi lebih kecil sehingga load file lebih cepat. 
° Mudah untuk mengubah tampilan, hanya dengan mengubah file 
CSS saja. 
° Dapat berkolaborasi dengan JavaScript dan merupakan pasangan 
setia HTML. 


° Dapat digunakan dalam hampir semua jenis web browser. 
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CSS merupakan sebuah teknologi internet yang di rekomendasikan oleh World 
Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS di 
standarisasikan, internet explorer dan Netscape merilis browser terbaru yang 
mendukung standar CSS. Terdapat tiga versi CSS, CSS1, CSS2, dan CSS3. 


Yaitu : 


Versi CSS 


Fitur CSS 
Fokus mengatur pemformatan dokumen HTML, seperti 
- Font (Jenis ketebalan). 
-Warna, teks, background dan 
elemen lainnya. 
- Text attributes, misalnya spasi 
antar baris, kata dan huruf. 
- Posisi teks, gambar, table dan elemen lainnya. 
- Margin, border dan padiing. 
- Mengatur format dokumen untuk kebutuhan di cetak 
dengan printer 
- Posisi konten 
- Downloadable 
Font huruf 
Table layout 
Media tipe yang 


-Sangat mendukung tampilan desain website 


- Animasi warna bahkan sampai animasi 3D 

- Menunjang kompabilitas website dengan smartphone 
- CSS math 

- CSS obyek model 

- Mendukung fungsi multimedia pada website 

- Beberapa efek teks, seperti teks berbayang, kolom 
koran, dan "word-wrap" 

-Jenis huruf eksternal, sehingga dapat menggunakan 

huruf yang tidak termasuk "web-safe fonts". 

-Beberapa efek pada kotak, seperti 
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Ka 


kotak yang ukurannya dapat 
diubah-ubah, transformasi 2 
dimensi dan 2 dimensi, sudut 


tumpul dan shadow 





CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C. 
Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung 
seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa 
penambahan. Ketika sebuah web yang semula menggunakan CSS 2 
bermigrasi CSS 3, tidak perlu mengubah apapun. 


Dengan adanya CSS mempermudah pengaturan dan pemeliharaan sebuah 
website dan tampilannya karena CSS memisahkan antara bagian pengatur 
gaya dan isi dari web. 


2) Anatomi dari cascading style sheet 
Bagian — bagian utama dari sebuah CSS itu terdiri dari tiga bagian yaitu: 
selector, property, value. Jika dalam HTML dikenal ada tag-tag yang menyusun 
sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan 
selector. 
Bagian CSS Keterangan 
Selector - nama-nama yang diberikan 
untuk style-style yang berbeda, 
baik itu style internal maupun 
eksternal 
- bagian elemen HTML yang 
akan ditunjuk untuk mengatur 
style 
- dapat berupa class dan ID 


Property - aturan dalam CSS untuk 


mengubah selector yang dipilih 
- property mempunyai nilai yang 
disebut dengan value 
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properties di dalam tanda { } 


value. - Merupakan nilai dari property 
CSS 


CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks 





tersebut terbagi ke dalam tiga bagian yaitu: selector, property, dan value. 


Format penulisan bagian-bagian dari CSS dapat dituliskan sebagai berikut : 


Selector{ Property : value; } 


Berikut ini sedikit contoh penggunaan selektor, property, dan value untuk 


mengatur style pada sebuah form 


оа naa e ak a erne 


Dari contoh penggunaan selector, property, dan value di atas maka tiap bagian 
akan di jelaskan sebagai berikut : 
- form : selector yang akan di atur stylenya 
- margin-left : property yang digunakan untuk jarak fieldset dari 
batas kiri layout 
- 0: nilai dari property margin-left 
Dengan adanya CSS memungkinkan untuk menampilkan halaman yang sama 


dengan format yang berbeda. 


3) Cara Kerja cascading style sheet 

Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulis 
style (selektor, id dan class), maka secara otomatis style tersebut akan 
bekerja pada dokumen HTML. Dengan mengatur selektor, id, dan class, 
untuk kemudian id dan class tersebut kita sesuaikan dan terapkan pada 
kode HTML . Dan secara otomatis pula CSS itu akan bekerja pada file 
HTML. 


Pendefinisian style bisa dilakukan pada tag <style>. Di dalam pasangan tag 


tersebut, pendefinisian style dilakukan dengan bentuk selector ( .. } 


Page | 47 


Pemrograman Web 





== 


Dalam hal ini, selector bisa berupa selector HTML, selector kelas, atau selector 


ID. 


Selector HTML mendefinisikan style bagi suatu tag HTML. Contoh di depan 


menggunakan selector HTML beruma img. Bentuk umumnya : 


Contoh : 
Nama-elemen { .. Ih: 
Contoh : 
mg WA ara ROO O SN 
Selektor class mendefinisikan kelas yang bisa berlaku untuk 
sebarang tag HTML. Bentuknya: 
Contoh : 
‚nema-alass l |} 
Contoh : 
.kotak { Border: solid; ) 
Selector ID mendefinisikan style bagi elemen yang memiliki ID sesuai 


yang tercantum dalam selector. Bentuknya: 
#id { .. } 

Contoh : 

#inggris {Font-weight:bold;Font- 





size:1.2em; } 
Berikut contoh yang menggunakan selector class dan selector ID dapat dilihat 


di bawah ini. 


<html> 


<head> 





<tittle>Contoh selektor kelas dan ID</tittle> 
<style type="text/css”> 
skOcak ( Borders solies Backlınegs Sax? | 
#jawa { Background-color: #ccff66; /* latarbelakang 
= 
#inggris { Font-weight: bold; Font-size: 1.2em; } 
</style> 
</head> 
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<div id="Indonesia” class="kotak”>Selamat pagi !</div> 








<div id-"jawa”»Sugeng enjing !</div> 











<div id="inggris” class="kotak”>Good morning !</div> 


</body> 





</html> 


Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut : 





Gambar 3.1 hasil penggunaan selektor class dan id 


Berdasarkan letak tempat stylenya, penerapan CSS pada sebuah halaman web 


dapat dilakukan dengan beberapa alternatif di antaranya adalah : 


A. Inline Style Sheet 

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara 
penulisannya cukup dengan menambahkan atribut style-"..." dalam tag HTML 
tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan 
mempengaruhi tag HTML yang lain. Contoh penulisan CSS secara inline style 


sheet, CSS berikut mengatur style di elemen <p></p> atau paragraf. 


<p align="center" style="color: #303; font-size: 24px">SMK 
</p> 


Saat penulisan CSS diatas, listing kode CSS langsung dipasang di tag HTML, 


namun hal tidak direkomendasikan karena akan menyulitkan pengaturan style 


jika terjadi perubahan tampilan website dikemudian hari. 
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B. Embedded Style Sheet 


CSS didefinisikan terlebih dahulu dalam tag <style> ... 


«body», lebih tepatnya didalam tag <head> 


</style> 


</head><html> 


<head> 


ESCILE> 


input .btn 


[Colo ii 

background: #ffa20f; 

border: 2px outset #BBD16D; 
FONS Ra ЕТЕ mes 
font-size: 14px; 

font-weight: bold; 

width : auto;) 


<body> 


<table> 


SER 


<td><form > 





«СТЕ 


</style> di atas tag 


serif; 


<p><label for="nama">Username</label> 


<input type="text" id="nama" /> 


</p> 
<p> 


<] 





<input уре Ее ГЕ = Ер > 
</p> 


<p> 


label for="KTP">Password</label> 


<input type="submit" value="Login" class="btn" 


onClick=parent.location="Home Iframe.htm" /> 


</p> 


</form></td> 


ee 


</table> 
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</body> 


</html> 


Bila listing kode diatas dijalankan akan menghasilkan tampilan sebagai berikut 


ini: 


ostrbeddes Morl 


Ç е: armpp/hitdecs, 





” 
Username | 


Password 


Gambar 3.2 penerapan embedded style sheet 


Pada listing kode diatas, penerapan style diberikan pada komponen input 
button hal ini ditandai dengan pembuatan CSS dengan nama “input.btn” 


didalam tag <style></style> 


<style> 


LAST, „OEM 


Di bagian body terdapat penerapan CSS dengan cara memanggil nama class 


nya 


C. External Style Sheet 
<input type="submit" value="Login" class="btn" 


onClick=parent.location="Home Iframe.htm" /> 


CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file 
atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal 
memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi 


berbasis web sehingga tampilan antar halaman akan terlihat konsisten. 
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File HTML 


| ae С55 





Gambar 3.3 file HTML dan .CSS 


File yang berisi style CSS disimpan dalam format *.css. Dari gambar diatas 
dapat dilihat file CSS ditempatkan dalam satu folder yang sama dengan file 
HTML. Contoh penulisan file.css 


input.btn 
[Colo ia 
background: #ffa20f; 
border: 2px outset #BBD16D; 
font-family: "calibri", Times, serif; 
font-size: 14px; 
font-weight: bold; 
width : auto; } 


Kemudian listing kode diatas disimpan dengan nama style.css dan untuk 
selanjutkan akan dipanggil pada file html seperti pada contoh berikut : 


<html> 

<head> 

<title>Sistem Informasi Widyalswara</title> 
<style type="text/css"> 

</style> 
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<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 


<body> 

<table> 

ÉL 

<td><form > 

<p><label for="nama">Username</label> 
<input type="text" id="nama" /> 

</p> 

<p> 


<label for="KTP">Password</label> 





nu Mayo ех E 
</p> 
<p> 


<input type="submit" value="Login" class="btn" 


Bila listing kode diatas dijalankan maka akan menghasilkan tampilan seperti 
berikut : 





Stem Informasi Widysisne x 


с {йе: ///С: /хжтпрр у 
Username 


Password | 


Gambar 3.4 penerapan sxternal style sheet 
Pada bagian head terdapat perintah pemanggilan file “style.css” seperti pada 
listing kode berikut : 
<style type="text/css"> 
</style> 


<link href="style.css" rel="stylesheet" type="text/css"> 


c. Rangkuman. 
Pada kegiatan belajar memahami anatomi dan cara kerja cascading style sheet 
dapat disimpulkan menjadi beberapa poin penting seperti berikut : 
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CSS merupakan salah satu dokumen website yang bertujuan untuk 


mengatur gaya (style) tampilan website. 
Beberapa manfaat dari penggunaan CSS 
- Kode HTML menjadi lebih sederhana dan lebih mudah diatur. 
- Ukuran file menjadi lebih kecil sehingga load file lebih cepat. 
- Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS 
- Dapat digunakan dalam hampir semua jenis web browser. 
CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh 
W3C dan CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada 
perubahan 
Anatomi CSS terbagi ke dalam tiga bagian yaitu: selector, property, dan 
value. 
Selector{ Property : value; } 
Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan 
menulis style (selektor, id dan class) 
Format penulisan CSS dengan Selector HTML adalah Nama-elemen 
Format penulisan CSS dengan Selector class adalah .nama-class { ... } 
Format penulisan CSS dengan Selector id adalah #id { ... } 
Penerapan CSS pada sebuah halaman web dapat dilakukan dengan 
beberapa alternatif di antaranya adalah: inline style sheet, embedded 


style sheet, external style sheet 


d. Tugas. 


Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam 


kegiatan ini masing-masing kelompok kerjakan tugas berikut : 


1. 
2. 


Jelaskan tentang anatomi cascading style sheet 

Jelaskan tentang macam selector yang dapat digunakan pada penerapan 
cascading style sheet 

. Jelaskan cara kerja CSS pada penulisan style dengan cara inline style 


sheet, embedded style sheet, external style sheet 


Kemudian secara bergantian masing-masing kelompok mempresentasikan 


hasilnya didepan kelas. 
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е. Теѕ Formatif. 


Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap 

butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah 

jawabannya pada lembar jawaban test formatif yang telah disediakan. 

1. Tuliskan anatomi cascading style sheet pada sebuah dokumen html 

2. Sebutkan macam selector cascading style sheet 

3. Jelaskan keuntungan penerapan cascading style sheet 

4. Berikan contoh penerapan cascading style sheet yang ditulis secara inline 
style sheet pada sebuah elemen html. 


f. Lembar Jawaban Tes Formatif. 


LJ- 01 : anatomi cascading style sheet 
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LJ- 03 : keuntungan penerapan cascading style sheet 


g. Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 
Setelah mengikuti kegiatan belajar 4 diharapkan peserta didik dapat : 


1) Memahami style-style dasar CSS untuk memformat tampilan teks 
2) Menerapkan beberapa style untuk memformat tampilan teks. 
3) Menyajikan CSS untuk memformat tampilan teks pada sebuah halaman 


web 


b. Uraian materi. 

Agar lebih menarik, mudah dalam hal pengaturans serta editing, teks pada 
sebuah halaman web dapat diberikan sytle dalam kemasan CSS. Pengaturan 
style tersebut meliputi banyak properti, diantaranya adalah pewarnaan, 
pemilihan font, spasi dan lain sebagainya. Untuk lebih detailnya dapat dilihat 
pada tabel berikut ini. 


Properti Keterangan 


Color Mengatur warna dari teks 
Direction Menentukan arah tulisan/teks 


letter-spacing Menambah ataupun mengurangi spasi antar karakter 
dalam teks 


line-height Mengatur tinggi baris teks 
text-align Menentukan batas teks secara horisontal 


text- Menentukan dekorasi/hiasan pada teks 
decoration 


text-indent Menentukan jarak inden dari baris pertama dalam teks- 
blok 


text-shadow Menentukan efek bayangan pada teks 


text- Mengatur huruf besar-huruf kecil dari teks 
transform 
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unicode-bidi Untuk mengeset unicode 
vertical-align Menentukan batas teks secara horisontal 
white-space Menentukan penulisan white-space pada elemen 


word-spacing Menambah ataupun mengurangi spasi antar kata dalam 
teks 





1) Pengaturan warna pada teks/color 
CSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks 
dengan CSS dapat menggunakan nilai warna sebagai berikut : 

". nilai HEX > misalnya, "#ff0000" 

= nilai RGB? misalnya, "rgb(255,0,0)" 

= nama dari warna tersebut? misalnya "red" 
Format penulisan untuk pemberian warna pada text menggunakan CSS adalah 
sebagai berikut : 


Berikut adalah contoh penulisan warna pada teks yang dituliskan secara 
embeded 
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<p>ini adalah paragraph, ditulis dengan warna merah. 











Default text-color didefinisakan pada body 


selector .</p> 





<p class="ex">ini adalah paragraph with class="ex". 








dan warna teks biru.</p> 
</body> 
</html> 
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut, 
secara otomatis ketika terdapat teks pada tag <body., <h1> dan <p> terkena 
style pewarnaan. 


Lex Ir x 
Г _. U _ 


с filey//Ey/Kurikulum%202013/BukuAjar/P.web/cek htm 


ini adalah heading 1 


au adalah paragraph with class="ex". dan warna teks biru 


Gambar 4.1 penerapan CSS warna teks 


2) Pengaturan spasi antar karakterf/letter-spacing 

Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk 
memberikan jarak (spasi) antar karakter atau huruf. Format penulisan CSS 
untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai 
berikut : 


selector { letter-spacing:nilai spasi;} 


Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini 


adalah contoh penerapan dari style tersebut : 


<HTML> 
<HEAD> 
<TITIE>Format Text </TITLE> 
СОЛЕВ зех 15) > 
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Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut, 


2 [5 Format Tem х vr — <- а 
Ф > C IN file///EyKuriliculu% 20201 3/BukuAjar/P.web/cek:html 


Pengaturan Spasi Pada Paragraph 


Gambar 4.2 penerapan CSS untuk pengaturan spasi pada paragraf teks 


3) Pengaturan bentuk-bentuk teks/decoration 

Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk 
mengatur atau menghapus dekorasi dari teks. Format penulisan CSS untuk 
mengaturan dekorasi teks adalah sebagai berikut : 





Nilai dari text-decoration dapat berupa overline, line-through, underline dan 
none yang berarti tanpa dekorasi . Berikut ini adalah contoh penerapan dari 
style tersebut : 
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Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut, 


/ D Format Tet x WEH Е x 


Ф Ф С |) file///E/Kurikulum96202013/BukuAjar/P.web/cek.htmi 
Bentuk Overline 

Henter a Retak Pare sthreosreh 

Header 3.Bentuk Underline 


Penggunaan Dalam Link Nilai NONE 
Gambar 4.3 penerapan CSS untuk pengaturan dekorasi teks 


4) Pengaturan spasi antar kata/word-spacing 
Salah satu style dari CSS adalah word-spacing yang dapat digunakan untuk 
memberikan jarak (spasi) antar kata. Format penulisan CSS untuk pengaturan 


jarak (spasi) antar karakter atau huruf adalah sebagai berikut : 
selector ( word-spacing:nilai spasi;) 


Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini 


adalah contoh penerapan dari style tersebut : 
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut, 


<HTML> 
<HEAD> 


UE Someone UE 
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IN сс» 


р {word-spacing: lcm} 
h2 {word-spacing: 5px} 
СОЛОДУ ЕВ 
</HEAD> 
<BODY> 
<p>Pengaturan Spasi per Kata sebesar 1 cm</p> 
<h2> Peregangan Header 2 sebesar 5 px</h2> 
</BODY> 


</HTML> 


Format Text x 


a file///€:/Kurikulum9620201 3/BukuAjar/P.web/cek.html 


Pengaturan Spasi per Kata sebesar 1 cm 
Peregangan Header 2 sebesar 5 px 


Gambar 4.4 penerapan CSS untuk pemberian efek bayangan 


5) Pengaturan jarak indentasi paragraph/text-indent 

Text-indent menentukan jarak inden dari baris pertama dalam teks-blok, 
sehingga teks pada baris pertama terlihat lebih menjorok kedalam dibanding 
teks pada baris yang lain. Format penulisan untuk pengaturan jarak indentasi 


text adalah sebagai berikut : 
selector { text-indent:nilai indent} 


Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini 


adalah contoh penerapan dari style tersebut : 


<HTML> 
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<HEAD> 
<TITLE-Format Text </TITLE> 
SSI E CSS 
p {text-indent: 2cm } 
</STYLE> 
</HEAD> 
<BODY> 
<p> 
Dengan text indent. 


Form adalah salah satu bentuk halaman web yang digunakan 


untuk menerima masukan dari pengguna, 





untuk selanjutnya masukan dari pengguna tersebut diolah 
menggunakan bahasa pemrograman web, 


baik secara server side scripting(misalkan PHP, JSP) 





ataupun client-side scripting (javascript). 

</p> 

Tanpa text indent. 

Form adalah salah satu bentuk halaman web yang digunakan 


untuk menerima masukan dari pengguna,untuk selanjutnya 








masukan dari pengguna tersebut diolah menggunakan bahasa 
pemrograman web,baik secara server side scripting (misalkan 


PHP, JSP) ataupun client-side 


Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut : 


im , > шн 
с be Mp те сор A š 
Dengan vet pen Penn ei dR aa barah “darana Th ч 4геж DA erben wP “am w. A eg AR SA . sr... 
VA PU O A e ha VD AA d e A AA 


Тарз те den Fore alt as A = 10 на AA тө A ÓN ÓN bar rara de pas e A moho ess 
речь w h a ab uno u vg mc PY ON mapa а» и ayang | erg 


Gambar 4.5 penerapan CSS untuk pengaturan text indent 


Page | 64 


Pemrograman Web 


= 





6) Pengubahan huruf besar dan huruf kecil dari sebuah teks/text- 
transform 

Teks-transform properti digunakan untuk menentukan huruf besar dan kecil 

dalam teks. Format penulisan CSS untuk pengaturan text indent adalah 

sebagai berikut : 


selector { text-transform:nilai text transform} 


Nilai text transform dapat diisi dengan uppercase,lowercase, capital. Pada 
listing kode berikut terlihat CSS dituliskan dalam bentuk CLASS p.besar, p.kecil 
dan p.kapital. Hal ini bertujuan untuk memberikan pengaturan yang berbeda 


pada paragrafnya. 


<STYLE ="text/css"> 
p.besar {text-transform: uppercase) 


p.kecil {text-transform: lowercase} 





p.kapital {text-transform: capitalize} 


</STYLE> 


Berikut ini adalah contoh penerapan dari style tersebut : 
<HTML> 
<HEAD> 
AE SS AA 








<STYLE ="text/css"> 
p.besar {text-transform: uppercase) 


p.kecil {text-transform: lowercase} 





p-kapital {text-transform: capitalize} 
</STYLE> 
</HEAD> 
<BODY> 
<p class="besar"> 
pengubahan menjadi huruf Besar (Kapital) 
</p> 
<p class="kecil"> 


PENGUBAHAN MENJADI HURUF KECIL 
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</p> 

<p class="kapital"> 

huruf kapital pada setiap awal kata 
</p> 

</BODY> 

</HTML> 


Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut, 
Format Text x 
С file///E/Kurikulum920201 3/BukuAjar/P.web/cek.htmi 
PENGUBAHAN MENJADI HURUF BESAR (KAPITAL) 
pengubahan menjadi huruf kecil 
Huruf Kapital Pada Setiap Awal Kata 


Gambar 4.6 penerapan CSS untuk pengaturan text-transform 


7) Pemberian efek bayangan pada teks/Text shadow 
Text-shadow digunakan untuk memberikan efek bayang pada sebuah teks. 


Berikut adalah format penulisan CSS dengan text-shadow 


Selector ( text-shadow: koordinatX koordinatY 





nilaiWarnaTeksBayangan; } 


Contoh : penulisan text shadow 
hl { text-shadow: 2px 2px #ff0000; } 


Berikut ini adalah contoh penerapan dari style tersebut : 
Mn 
<html> 


<head> 





SIE 
h1 {text-shadow:2px 3px #FF0000;} 
</style> 
</head> 
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<body> 


<hl>Efek Text-shadow </Һ1> 

<p><b>Catatan:</b> Internet Explorer Versi 9 dan 
sebelumnya tidak support pada text-shadow property.</p> 
</body> 

</html> 


Bila listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai 
berikut : 


cek hirni x 


a file:///E:/Kurikubum20201 3/BukuAjar/Pweb/cek. html 


Efek Text-shadow 


Catatan: Internet Explorer Versi 9 dan sebekennya tidak support pada text-shadow property 


Gambar 4.7 penerapan CSS untuk pemberian efek bayangan 


8) Pengaturan Text Alignment 

Properti text-align digunakan untuk mengatur alignment horizontal teks. Teks 
dapat ditulis rata kiri, rata kanan, rata kanan kiri ataupun ditulis center. Ketika 
text-align diset “justify", setiap baris memiliki lebar yang sama, dan margin kiri 
dan kanan lurus (seperti di majalah dan surat kabar). Format penulisan CSS 


untuk text alignment 
selector {text-align:nilai text-align; } 


Berikut adalah contoh dari penulisan style text-align yang disisipkan di selector 


h1 dan paragraf. 
hl {text-align:center; } 


p-tanggal {text-align:right; } 
p.utama {text-align:justify; } 
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pada selector p.tanggal dan p.utama artinya CSS akan diberikan ke paragraf 


dengan pemanggilan kelas “tanggal” dan “utama”. Untuk lebih lengkapnya 


dapat dilihat pada contoh berikut : 


С ШШЕ ОШ РЕШЕ БШ 
<html> 


<head> 





<style> 

hl {text-align:center; } 
p.tanggal {text-align:right;} 
p.utama {text-align:justify;} 
</style> 

</head> 

<body> 

Ее ото е оо зеза аа е Ио 


<р class="tanggal">07 Desember 2013</p> 








<p class="utama">Properti text-align digunakan untuk 


mengatur alignment horizontal teks. 


Teks dapat ditulis rata kiri, rata kanan, rata kanan 








kiri ataupun ditulis center. Ketika text-align diset 








“justify", setiap baris memiliki lebar yang 


sama, dan 


margin kiri dan kanan lurus (seperti di majalah dan surat 


kabar). 





Format penulisan CSS untuk text alignment.selector {text- 





align:nilai text-align; } 


Berikut adalah contoh dari penulisan style text-align 


yang disisipkan di selector hl dan paragraf. 











hl {text-align:center; } 











p.tanggal {text-align:right;} 
PAUTA ten tma MoS ЕУ 


pada selector p.tanggal dan p.utama artinya 


diberikan ke paragraf dengan pemanggilan kel 


contoh berikut :</p> 


CSS akan 


as “tanggal” 





dan “utama”. Untuk lebih lengkapnya dapat dilihat pada 
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<p><b>Catatan:</b> Baris ini adalah contoh penulisan tanpa 


CSS</p> 
</body> 
Sem > 


Bila listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai 
berikut : 


Contoh CSS text-align 


ap ooa so agan dgn as cpa ta y Aa es жан sd, te hee be pee Gk cee rs u. ..: h. f... map baa mandhi Pa 


Gambar 4.8 penerapan CSS untuk pengaturan text-align 


с. Rangkuman. 
Dari paparan materi pembahasan kegiatan belajar menyajikan cascading style 
sheet untuk memformat tampilan teks dapat dibuat rangkuman materi sebagai 
berikut : 
= Agar lebih menarik, mudah dalam hal pengaturans serta editing, teks 
pada sebuah halaman web dapat diberikan sytle dalam kemasan CSS. 
= Pengaturan style tersebut meliputi banyak properti, diantaranya color, 
direction, letter-spacing, line-height, text-align,text-decoration, text- 
indent, text-shadow, text-transform, unicode-bidi, vertical-align,white- 
space, word-spacing 
= Format penulisan untuk pemberian warna pada text menggunakan CSS 
adalah sebagai berikut : selector {color:nilai warna} 
= Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter 
atau huruf adalah sebagai berikut selector f letter-spacing:nilai spasi;} 
= Format penulisan CSS untuk mengaturan dekorasi teks adalah sebagai 
berikut selector {text-decoration : nilai text-decoration } 
= Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter 


atau huruf adalah sebagai berikut selector { word-spacing:nilai spasi;} 
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= Format penulisan untuk pengaturan jarak indentasi text adalah sebagai 


berikut selector { text-indent:nilai indent} 

" . Format penulisan CSS untuk pengaturan text indent adalah sebagai 
berikut selector { text-transform:nilai text transform} 

= format penulisan CSS dengan text-shadow adalah 
Selector {text-shadow: koordinatX koordinatY nilaiWarnaTeksBayangan 


i} 
= Format penulisan CSS untuk text alignment selector {text-align:nilai text- 
align;} 
d. Tugas. 


Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam 
kegiatan ini masing-masing kelompok kerjakan tugas berikut : 
1. Buatlah tampilan halaman web dengan memberikan style pada teks yang 


digabungkan dengan tabel serta gambar seperti pada contoh berikut 


kursi kotak untuk teras mungil 
pure Sk 


dengan nang tatrasmu teras yang terbatas kuasanya maka kami 





mengoda husting туі уат) sample .. samus setelah hunting beberapa 
4 kali kami belum mendapat bentuk serta harga yang cocok dihati...karena 
model yang kamu Ingiokan tidak ready akbirnya kami coba desagn kursinya 


den pesan ke pengrajin rotan-andong yang bda diseputaran orjosarr 





malang Dengan harga yang relatif terjangkau. 


Resi More 


2. Buatlah tampilan teks dalam fielset dengan memberikan style pada teksnya 


seperti pada gambar berikut : 
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TOPIK PILIHAN 


INDONESIA SATU 


OSYEKTIF INDEPENDEN 


Banjir Longsor Sulawesi Utara 


Teror Bom di Boston 


Dugaan Suap Rudi Rubiandini 


Game Flappy Bird 
Banjir jakarta 2014 
Geliat Politik jelang Pemilu 
Konvensi Capres Demokrat 
Suksesi 2014 


Politik Rhoma Irama 





3. Kemudian secara bergantian masing-masing kelompok mempresentasikan 


hasilnya didepan kelas. 
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е. Теѕ Formatif. 


Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap 


butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah 


jawabannya pada lembar jawaban test formatif yang telah disediakan. 


1. 


f. 


Sebutkan sedikitnya 5 properti dari pengaturan teks menggunakan CSS 


2. Tuliskan format penulisan CSS untuk memberikan warna pada teks 
3. 
4 


. Tuliskan format penulisan CSS untuk pengaturan spasi antar karakter pada 


Tuliskan format penulisan CSS untuk memberikan efek bayangan 


paragraf 


. Tuliskan format penulisan CSS untuk pengaturan spasi antar kata pada 


paragraf 


Lembar Jawaban Tes Formatif. 


LJ- 01 : 5 properti teks 


Page | 72 


Pemrograman Web 





Page | 73 


Pemrograman Web 





g. Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 5 diharapkan peserta didik dapat : 

1) Memahami style-style dasar CSS untuk memformat gambar 

2) Menerapkan beberapa style untuk memformat tampilan gambar 

3) Memahami style-style dasar CSS untuk memformat video 

4) Menerapkan beberapa style untuk memformat tampilan video 

5) Menyajikan CSS untuk memformat tampilan multimedia pada sebuah 


halaman web 


b. Uraian materi. 
Cascading style sheet dapat pula diterapkan pada elemen-elemen HTML 


multimedia, diantaranya gambar,video,audio. 


1) Cascading style sheet pada tampilan gambar 

CSS berperan penting dalam menyajikan informasi dengan visual yang lebih 
baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. 
CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag 
html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur 
gambar dapat dituliskan secara inline seperti contoh berikut : 


<img src="nama-file-gambar" width="lebar" height="tinggi" 





SA е ex o e A 5 


0) 


Selain dengan cara inline , stlyle CSS dapat diberikan secara embed ataupun 
eksternal CSS. Berikut terdapat tiga gambar yang diberi style dimana ukuran 
ketiga gambar dibuat sama 200 x 200 dan margin atas gambar adalah 10px 
sehingga antar gambar terlihat ada jarak. 
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DOCE 
<html> 
<head> 
<tittle>Contoh CSS</tittle> 
<style> 
imom Margin Topka OPR 
e БЕШИ Ке; 
ike aie elo Olean 





width: 200px; 
height:200px; } 
</style> 
</head> 
<body> 
Contoh CSS pada gambar (img) <br> 
<i) gee оао Оа о 


<img пае отта ау > 





<img see="paprika. pa > 
</body> 
</html> 


Bila listing kode diatas dijalankan maka akan menghasilkan tampilan gambar 
seperti berikut ini : 





Gambar 5.1 penerapan CSS untuk image 
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2) Cascading style sheet Gambar untuk background 


Seperti penambahan warna latar, penambahan gambar latar belakang juga 
dilakukan dengan menggunakan dua properti, yaitu background dan 
background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, 


relatif terhadap file CSS, sama seperti pada penambahan font. 





oy { loackeseomimels well (“latar smg) 











Sackerzoune-ımages viel БОШКЕ Еск ang“)? ) 


kesalahan tersebut bekerja, simpan dan jalankan kode Namun, penambahan 
gambar dengan cara di atas akan memberikan masalah ketika ukuran gambar 
tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali, 
secara horizontal maupun vertikal, jika ukuran elemen lebih besar dari ukuran 


gambar. Untuk dapat melihat bagaimana berikut : 


<html> 


<head> 





<title>Background Image Goes Wrong</title> 





<style type="text/css"> 
#utama (background- 
image:url(kiwi.jpg) ;height:600px;width:800px; } 
</style> 

</head> 

<body> 

<div id="utama"> 

</div> 

</body> 

</html> 


Gambar asli yang digunakan sebagai background dengan ukuran 50px X 50px 





Gambar 5.2 kiwi.jpg 
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Karena ukuran asli gambar adalah 50px X 50px sedangkan ukuran background 


yang diinginkan adalah 800px X 600px maka gambar akan ditampilkan 


berulang-ulang sampai terpenuhi ukuran background 800px X 600px seperti 


pada gambar berikut : 
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Gambar 5.3 penerapan CSS untuk image background 


Adakalanya perulangan tampilan gambar otomatis ini tidak diinginkan. Untuk itu 
dapat menggunakan properti background-repeat untuk mengatur bagaimana 
perulangan kode ingin dilakukan. Terdapat empat nilai yang dapat diisikan pada 
properti background-repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y. 
Seperti namanya, no-repeat menghilangkan perulangan, repeat-x memberikan 
perulangan hanya pada sumbu x (horizontal), dan repeat-y memberikan 
perulangan hanya pada sumbu y (vertikal). Listing Kode CSS di bawah akan 
menghilangkan perulangan pada sumbu x dan sumbu y, sehingga kiwi,jpg 
hanya akan ditampilkan satu kali : 

#utama (background-image: url (kiwi.jpg): 
background-repeat: no-repeat; 


800px; } 





height: 600px;width: 
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3) Cascading style sheet untuk menyisipkan gambar 


Adakala saat membuat halaman web yang berisi artikel diperlukan gambar 
yang mendukung artikel tersebut. Agar terlihat rapi dan menarik maka gambar 


yang disisipka perlu diberi CSS. 


<html> 

<head> 

<title> 

CSS image placement 


< езле а 





<style > 

#headlinel { background-image: url(kiwi.jpg): 
background-repeat: no-repeat; 
background-position: left top; 
padding-top:68px; 
margin-bottom:50px; } 

#headline2 { background-image: url (kiwi.jpg); 
background-repeat: no-repeat; 
background-position: left top; 
padeling=to0: 68px; | 

</style> 

</head> 

<body> 

<div id="headlinel">CSS (versi sekarang adalah CSS3) 
banyak dilibatkan dalam dokumen Web. 

Kegunaannya adalah untuk memformat dokumen. 


Sebagai contoh, warna teks atau bahkan warna 





latarbelakang bisa diatur melalui CSS. 
</div> 
<div id="headline2">Namun, tentu saja kegunaan CSS jauh 


lebih 
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Bila listing kode dijalankan akan menghasilkan tampilan sebagai berikut : 





file: NE: parop tido Buku Web ganar fied 


CSS (verti sekarang adalah CSS 3) banyak dibaan dalam dobaren Wet 
Kegunaannya adalah end merforaat dokumen Sebaga contoh, wama teks 
atso bahkan warni star belakang ua daba melaba CSS 


Мото, lerma daja keginan CSS рый kba mpd danpada sekadar mengatas 
wama reperi tu Membuat bangku aro bahkan mengada agar elemen à 
Solares eb terletak. pada роз serterena basa Wakaka dengan CSS 





Gambar 5.4 penerapan CSS untuk penyisipan image pada teks 


4) Cascading style sheet pada tampilan video 
Untuk penerapan Cascading style shee pada elemen video dapat dituliskan 


secara inline seperti contih berikut ini : 


<html> 

<head> 

<title>Test</title> 

</head> 

<body> 

<video controls="controls" style="display:block; margin: 
0 auto; width:400px ; heigth:400;" > 

<source src="movie.mp4" type="video/mp4" /> 

Your browser does not support the video tag. 

</video> 


</body> 
Bila listing program diatas dijalankan akan menghasilkan tampilan video yang di 


atur tampil “center” dengan atribut width:400px dan height:400px seperti pada 


tampilan berikut ini : 
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с file: С ратор hidocs Bula Web css Vic = 





Gambar 5.5 penerapan css pada video 


5) Cascading style sheet video embed dari youtube 
Penyajian video juga bisa memanfaatkan elemen iframe yang dilinkkan ke 
alamat video tertentu , misalnya www.youtube.com. Berikut adalah penerapan 


CSS secara embed untuk menampilan video dari youtube. 


<html> 
<head> 
<title>Test</title> 


Sie 





.videoWrapper { position: relative; 
padding-bottom: 56.25%; /* 1б:б */ 
Dacia 259x; 
height: 0; } 
-videoWrapper iframe { position: absolute; 
wo88 OF} 
lorc: Of 
width: 100%; 
height: 100%; } 
</style> 
</head> 
<body> 
Page | 81 


Pemrograman Web 





<div class="videoWrapper"> 

<!-- Copy & Pasted from YouTube --> 

<iframe width="560" height="349" 
src-"http://www.youtube.com/embed/n dZNLr2cME?rel-0shd-—1" 
frameborder="0" allowfullscreen></iframe> 

</div> 

</body> 

</html> 


Bila listing kode diatas dijalankan dalam keadaan komputer terhubung dengan 


internet akan menghasilkan tampilan sebagai berikut : 


Sean Hyman Talks Stocks 





Gambar 5.6 video dengan embed youtube 


c. Rangkuman 
Dari paparan materi pembahasan kegiatan belajar menyajikan cascading style 
sheet untuk memformat tampilan multimedia dapat dibuat rangkuman materi 


sebagai berikut : 
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= CSS berperan penting dalam menyajikan informasi dengan visual yang 


lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh 
mesin pencari. 

= Untuk mengatur format multimedia dapat dituliskan secara inline, embed 
maupun eksternal CSS. 

= Pemberian style pada gambar dapat menggunakan selector <img> 

= Pemberian style pada video dapat menggunakan selector <video> 

= Penambahan gambar sebagai latar belakang menggunakan dua properti, 
yaitu property background image dengan menggunakan tag div 
seperti format berikut 


cy { lackeizoumc=images wel (“lata отео ps } 


d. Tugas. 

Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam 

kegiatan ini masing-masing kelompok kerjakan tugas berikut : 

1. Buatlah tampilan halaman web yang memanggil video dari youtube , 
sebelum video muncul ada image yang ditampilkan terlebih dahulu. Posisi 
dari video ada di sebelah kanan halaman web 

2. Buatlah tampilan halaman web yang menampilkan 3 gambar dengan ukuran 
yang berbeda 
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с file- C: Pmp [ARAOS [BK JNE gambar Bakar 





3. Kemudian secara bergantian masing-masing kelompok mempresentasikan 


hasilnya didepan kelas. 


e.Tes Formatif. 

Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap 
butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah 
jawabannya pada lembar jawaban test formatif yang telah disediakan. 

1. Tuliskan format penulisan CSS untuk gambar menggunakan tag <img> 

2. Tuliskan format penulisan CSS untuk gambar menggunakan tag <div> 


3. Tuliskan format penulisan CSS untuk video menggunakan tag «video? 
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f. Lembar Jawaban Tes Formatif. 


LJ- 01 : CSS untuk gambar menggunakan tag «img» 
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g. Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 
Setelah mengikuti kegiatan belajar 6 diharapkan peserta didik dapat : 


1) Memahami style-style dasar CSS untuk memformat tampilan tabel 
2) Menerapkan beberapa style untuk memformat tampilan tabel 
3) Menyajikan CSS untuk memformat tampilan tabel pada sebuah halaman 


web 


b. Uraian materi. 

1) Konsep dasar model box 

Pada dasarnya elemen dari HTML adalah model box. Istilah model box ini 
digunakan pada saat membahas desain dan layout. Model box memungkinkan 
untuk membuat border disekeliling elemen dan space elemen yang saling 


berhubungan. Model box pada elemen HTML dapat digambar sebagai berikut : 





Gambar 6.1 konsep model box 


Keterangan gambar 

“Margin Daerah paling diluar yang membatasi dengan elemen HTML 
yang lainnya dan tidak berwarna 

“Border Border mengelilingi padding dan content. Garis yang mempunyai 


warna dan ketebalan 
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Padding Area yang mengelilingi content. Warna padding dipengaruhu oleh 


background dari box 


Content Isi dari box, bisa berupa teks maupun gambar 


Ketika menentukan width dan height dari properti elemen dengan menerapkan 
CSS, sebenarnya itu hanya mendefiniskan area content saja sehingga jika 
menginginkan keseluruhan eleme box maka harus diperhitungkan juga margin- 


border-padding 


2) Pengaturan border tabel 

CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah 
tabel. Format yang dapat dilakukan meliputi jenis garis (dotted, solid, dan lain- 
lain), warna border, ketebalan garis tepi dan sebagainya. Demikian pula warna 


dari sebuah sel, dapat diatur dengan CSS. 


Berikut adalah contoh penerapan style border pada tabel dengan style sebagai 


berikut (border: 1px solid black;) dan listing kode lengkapnya seperti dibawah ini 


<html> 


<head> 





<suyle> 
table p eh е 
1 border: los solic! black} J 
</style> 
</head> 
<body> 
<easle> 
Ser 
<th>Nama Depan</th> 
<th>Nama</th> 
Ser 
era 
<td>Adelin</td> 
<td>Larasati</td> 
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Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai 
berikut : 


Dom VE 


= - Ç D fle///s/Kurikulum%6202013/8u 





Gambar 6.2 penerapan style border pada tabel 


Berikut ini contoh pengaturan property 


yang menghasilkan tampilan garis single pada tabel 
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Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai 
berikut : 





£ > @ D! ///E:/Xurikulum%w2020 %20201 





Gambar 6.3 penerapan style border-collapse pada tabel 
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Pada saat memberikan style border > {border:1px solid black;} 

Hal ini berarti seluruh border akan efek terkena 1px solid black; baik bagian 
atas (top),bagian bawah(bottom), bagian kiri(left) ataupun kanan (right). Border 
dapat dikenai style untuk area tertentu saja karena border dapat diseting untuk 
border bawah atas kanan dan kiri seperti pada style berikut : 





3) Pengaturan lebar dan tinggi tabel 

Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height 
Contoh berikut ini mengatur lebar tabel 100% dan tinggi dari elemen th adalah 
50px. 





Berikut ini penerapan style width dan height dalam sebuah tabel 
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Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai 
berikut : 





— aa — Ж. 
J a * Н x A 


«эс Ü aey//E/XurikuAnfs202013/ukuAjee/P web/cek.heml © ш 








Gambar 6.4 penerapan style width dan height pada tabel 
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4) Pengaturan text-align pada tabel 
Teks dalam tabel diatur dengan properti.text-align dan vertical-align . Nilai dari 


properti text-align untuk horizontal alignment adalah left, right, atau center. 


Nilai dari properti text-align untuk horizontal alignment adalah top, bottom, or 
middle. 





Berikut ini penerapan style text-align dalam sebuah tabel, dimana teks diatur 
dengan posisi rata kanan 
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Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai 
berikut : 


Ju WEE 


£ >+ © 5 file///6urikulum%2020 





Gambar 6.5 penerapan style text-align pada tabel 


5) Pengaturan padding tabel 

Padding adalah jarak antara isi atau content, berupa teks ataupun gambar 
dengan batas dalam dari sel tersebut. Style padding ini dapat diterapkan pada 
elemen HTML <td> (kolom). Ukuran yang digunakan dapat berupa cm, atau px 
(piksel). Property style untuk pengaturan padding yang mengelilingi content 
adalah tdi padding: 15px; ) 

Padding dapat pula diatur untuk bagian tertentu saja, misalnya adalah : 





- padding-top [jarak dari atas sel 

















- padding-bottom Lijarak dari bawah sel 














- padding-left Ojarak dari kiri sel 
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- padding-right jarak dari kanan sel. 
Berikut ini adalah beberapa contoh penggunaan style padding pada tabel : 
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listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai 
berikut : 





GA GD fle///E/Kurikulum92020 





Gambar 6.6 penerapan style padding pada tabel 
Jika menginginkan padding diarea tertentu saja, misalnya padding untuk area 
kanan maka dapat diterap padding-right 
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Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai 
berikut : 





J D cent | x 








CA GD file///E/Kurikulum£202013/BukuAjar/ 





Gambar 6.7 penerapan style padding-right pada tabel 
6) Pengaturan warna pada table 
Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada 
teks,background maupun border. 


Style diatas akan memberikan efek warna green pada border table,data (td) 
dan header tabel (th). Style warna juga bisa diberikan hanya pada bagian 


tertentu saja, misalnya bagian header tabel (th) seperti pada listing css dibawah 
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Header tabel akan berwarna green dan teksnya berwarna putih. Penerapan 
style diatas pada sebuah tabel akan terlihat pada contoh berikut : 
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Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai 
berikut : 





Gambar 6.8 penerapan style color pada tabel 


Ketika pada td tidak diberi style seperti pada style berikut : 





Akan menghasilkan tampilan tabel seperti berikut : 


|`) cek.html x W 
&A GD file///E/Kurikulurr 














Gambar 6.9 td tidak diberi style tersendiri 
c. Rangkuman. 
Dari paparan materi pembahasan kegiatan belajar menyajikan cascading style 
sheet untuk memformat tampilan tabel dapat dibuat rangkuman materi sebagai 
berikut : 
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" Pada dasarnya elemen dari HTML adalah model box yang mempunyai 


properti margin,border,padding dan content hal ini dapat digunakan 
untuk mendesain tampilan dari tabel. 

= CSS dapat digunakan untuk memformat border atau garis tepi dari 
sebuah tabel. 

= penerapan style border pada tabel dengan style sebagai berikut 
(border: 1px solid black;} 

= Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width 
dan height. Teks dalam tabel diatur dengan properti.text-align dan 
vertical- align . 

= Nilai dari properti text-align untuk horizontal alignment adalah left, right, 
atau center. 

= Nilai dari properti text-align untuk horizontal alignment adalah top, 
bottom, or middle 

= Padding adalah jarak antara isi atau content, berupa teks ataupun 
gambar dengan batas dalam dari atau elemen HTML <td>. 

= Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada 
teks,background maupun border 

" Style warna akan memberikan efek warna pada tag table,data (td) dan 
header tabel (th). 


d. Tugas. 
Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam 
kegiatan ini masing-masing kelompok kerjakan tugas berikut : 


1.Buatlah tabel seperti berikut dengan mengatur warna di elemen tag <th> 


Nama Computer Ргоззезог Ram System Operasi 
Cint-1 IP 41,8 Ghz 10GB Redhat Linux 
Cint-2 IP2GhzC 6GB Mandrake Linux 
Cint-2 XP 2000+ 20 GB Windows 


2. Buatlah tabel seperti berikut dengan 
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Kompetensi Keahlian Kode — imi Diklat JmiKaitan Pencapaian (NX) 
Animasi TIKAMO73 В о 0 
Teknik Komputer dan Jaringan TIKKIO7 1 21 21 100 
Teknik Multimedia TKMMO72 10 0 0 
Rekayasa Perangkat Lunak TIKPLOTO 21 17 81 
Teknik Jaringan Akses TITIADES о 0 0 


Kemudian secara bergantian masing-masing kelompok mempresentasikan 


hasilnya didepan kelas. 


e. 


Tes Formatif. 


Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap 


butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah 


jawabannya pada lembar jawaban test formatif yang telah disediakan. 


1. 


. Tuliskan format penulisan CSS untuk pengaturan border pada tabel 


O A O N 


f. 


Jelaskan tentang model box pada elemen html 


. Tuliskan format penulisan CSS untuk pengaturan warna pada tabel 
. Tuliskan format penulisan CSS untuk pengaturan teks pada tabel 


. Tuliskan format penulisan CSS untuk pengaturan lebar dan tinggi tabel 


Lembar Jawaban Tes Formatif. 


LJ- 01 : model box pada elemen html 
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SEK 








a. Tujuan Pembelajaran. 
Setelah mengikuti kegiatan belajar 8 diharapkan peserta didik dapat : 
1) Memahami style CSS untuk memformat tampilan form 
2) Menerapkan beberapa style dasar CSS untuk memformat tampilan 


form 


b. Uraian materi. 

Tampilan sebuah form akan lebih terlihat menarik apabila diterapkan CSS di 
dalamnya. Style CSS dapat digunakan di berbagai komponen input di dalam 
form. Dengan menggunakan style CSS akan mengurangi beban halaman dan 
konsumsi bandwidth. 


1) Cascading style sheet pada elemen form 

Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain 
salah satunya memberikan style CSS. Dibawah ini adalah style yang bisa 
diberikan pada elemen form diantaranya pengaturan besar dan jenis border, 
warna border, lebar form, batas form dari sisi layout, dan warna background 
dari form. Sebenarnya masih banyak style lain yang bisa diberikan ke form 


Form 
( border:1lpx solid #666666; 
width : 480; /*lebar form*/ 
margin-left:0: /“jarak dari batas kiri layout*/ 


background-color:#ffff66; } 


Bila style form diatas di embedkan ke dalam file html akan listing kodenya 
seperti berikut ini : 
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Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut 








Gambar 7.1 form dengan css 


2) Cascading style sheet pada input text 

Textarea mendefinisikan kontrol input berupa area teks pada form .Elemen 
form textarea dapat diatur stylenya dengan menggunakan selector textarea 
(...) . Berikut contoh penerapan CSS untuk elemen textarea. 
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Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut. 


LI Pengaturan Pada hom Text x 
£ > © е Сатрро Виа Амо Рет 








Gambar 7.2 penerapan css pada textarea 


3) Cascading style sheet pada text field 
extfield mendefinisikan kontrol input text pada form. Berikut ini adalah contoh 
format CSS pada input yang membuat efek dari input textfield menjadi seperti 
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sisi formulir cetakan. CSS untuk textfield menggunakan selector input. Style 
yang diberikan pada input textfield diantaranya warna, background, border, 
jenis serta ukuran font dan masih banyak atribut lainya yang bisa digunakan 
untuk style textfield. 
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Bila listing kode dijalankan akan menampilkan tampilan berikut ini : 





© Э © О теС:атрручх 





Ketika mouse diarahkan 
Nama : kg textfield 


нне 


— — ee F 


w... 





Gambar 7.3 penerapan css pada textfield 


4) Cascading style sheet pada button 

Button merupakan tombol yang dapat diklik. Pada tombol, baik submit, reset 
maupun button, style CSS dapat digunakan untuk menimbulkan efek pipih (flat) 
pada tombol. Berikut ini adalah contoh penggunaan CSS pada tombol flat : 
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Bila listing kode diatas dijalankan akan menampilkan style button dengan efek 


flat/pipih seperti berikut ini : 
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(3 Pengaturan Pada Form Tom: x 


= > C 0 ме: атр 





Gambar 7.4 style button flat 


Efek style juga bisa diberikan saat button dilewati mouse. Untuk memberikan 
efek berbeda saat button dilewati mouse dapat menggunakan selector CSS 
input.button:hover . Untuk listing kode lengkapnya adalah sebagai berikut : 
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Bila listing tersebut dijalankan akan muncul tampilan form dengan keadaan 


yang berbeda saat mouse berada melewatinya dan tidak melewatinya. Dibawah 
ini keadaan button ketika mouse tidak berada diatasnya. Style button yang 
bekerja saat mouse tidak melewati button 
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Sehingga muncul tampilan sebagai berikut : 





€ > @ 0 йе: С: xampp/ht 
Nama | 
Alamat | 

= | 


Gambar 7.5 style form input.button 


Saat mouse melewatinya, button yang semula berwarna orange berubah 
menjadi biru. Style untuk memberikan perubahan saat mouse melewati button 
adalah 
input .button:hover 
(colors ice 
background: #0c62a4; /*biru kayak judul header*/ 
border: 2px outset #ffa20f, 
fonc- family: "calibri", Times, serit 
font-size: 14pxj 
font-weight: bold: ) 


Sehingga menghasilkan efek sebagai berikut : 





э е D file: ///C:/xampp/htdocs 
Nama 4 


Alamat 
Gambar 7.6 style form input.button:hover 
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5) Cascading style sheet padaradio button 

Radio button merupakan bagian dari elemen input form. Saat ingin memberikan 
style pada radio button dapat menggunakan selector input.selector. Contoh 
berikut adalah style CSS pada input yang bertipe pilihan radiobutton : 
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Wanita/Famale </TD> 


</TABLE> 
</form> 
</BODY> 
</HTML> 


Untuk menerapkan style input.rd1 dan input.rd2 maka pada tag <input 
type="radio" > perlu memanggil style tersebut dengan cara class="rd1” dan 
class-”rd2” . Sehingga ketika listing kode diatas dijalankan akan muncul 


tampilan radio button seperti berikut ini : 


Pengaturan peda Form 





с file: ///C: Hampohitdocs/BukuW 


Kelamin Pria Male 


Waruta/Farnale 





Gambar 7.7 penerapan style pada radio button 


6) Cascading style sheet pada chexbox 
Checkbox merupakan bagian dari elemen input form. Saat ingin memberikan 
style pada Checkbox dapat menggunakan selector input.selector. Contoh 
berikut adalah style CSS pada input yang bertipe pilihan Checkbox. 
<html> 
<head> 


<title>pengaturan pada form checkbox</title> 





<style ="text/css"> 
input.checkboxl( background: blue ;border-color: 
green; 
border-style : outset double; } 
input.checkbox2{ background: yellow ;border-color: 
Beer 


border-style :double; } 


Page | 115 


Pemrograman Web 


Page | 116 








Pemrograman Web 


Kan 


</body> 


</html> 


Bila listing kode diatas dijalankan akan muncul tampilan checkbox seperti 
berikut : 


Pengaturan Pada Form Che 


с flle: // /C: kampp ntdocs ка 


Hoby Y Badminton 


Teras Meja 
Sepakbola 


Golf 





Gambar 7.8 penerapan style pada check box 


c. Rangkuman. 


Dari paparan materi pembahasan kegiatan belajar menyajikan cascading style 


sheet untuk memformat tampilan formdapat dibuat rangkuman materi sebagai 
berikut : 


Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan 
desain salah satunya memberikan style CSS. 

Dengan menggunakan style CSS akan mengurangi 
bebanhalamandankonsumsi bandwidth. 

style yang bisa diberikan pada elemen form diantaranya pengaturan 
besar dan jenis border,warna border, lebar form, batas form dari sisi 
layout, dan warna background dari elemen-elemen form. 

Elemen form dapat diatur stylenya dengan menggunakan selector form 
(ак 

Elemen form textarea dapat diatur stylenya dengan menggunakan 
selector textarea {...}. 

Style yang diberikan pada input textfield diantaranya warna, 
background, border, jenis serta ukuran font dan masih banyak atribut 


lainya yang bisa digunakan untuk style textfield. 
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Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam 


d.Tugas. 


kegiatan ini masing-masing kelompok kerjakan tugas berikut : 
1. Buatlah form dilengkapi CSS dengan menggunakan elemen fieldset, 
textfield serta select seperti contoh berikut ini 


Nama 
KTP 


Kelamin Laki-laki - 


m 


Agama [istam =) 
Status (kawin =) 


2. Buatlah form dilengkapi CSS dengan menggunakan elemen 


textfield,radio button serta select seperti contoh berikut ini 
Daftar 


— ~ +62 ө 


“+42 49 


ea meme А а и 


Kemudian secara bergantian masing-masing kelompok mempresentasikan 


hasilnya didepan kelas. 
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е. Теѕ Formatif. 


Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap 
butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah 
jawabannya pada lembar jawaban test formatif yang telah disediakan. 

1. Tuliskan format penulisan CSS untuk elemen form 
Tuliskan format penulisan CSS untuk input text area 
Tuliskan format penulisan CSS untuk text field 


Tuliskan format penulisan CSS untuk radio button 


m © N 


Tuliskan format penulisan CSS untuk checkbox 


f. Lembar Jawaban Tes Formatif. 
LJ- 01 : CSS untuk elemen form 
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LJ- 03 : CSS untuk elemen text field 
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Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 





Setelah mengikuti kegiatan belajar 8 ini siswa diharapkan dapat : 
1) Mengetahui bahasa pemrograman pada halaman web klien 


2) Memahami pembuatan dokumen javascript 


b. Uraian Materi. 

Pengenalan Javascript 

Javascript adalah bahasa yang berbentuk kumpulan skrip yang berjalan pada 
suatu dokumen HTML. Sepanjang sejarah internet bahasa ini adalah bahasa 
skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk 
memberikan kemampuan tambahan terhadap bahasa HTML dengan 
mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi 


browser bukan di sisi server web. 


Javascript diperkenalkan pertama kali oleh Brendan Eich yang bekerja di 
Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript” 
yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 
2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, 
pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan 
yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun 
suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara 
Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, 
maka Netscape memberikan nama “Javascript” kepada bahasa tersebut pada 
tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri 
mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai 
“Jscript” di browser Internet Explorer 3. Versi terakhir dari bahasa ini adalah 


versi 1.8.5 yang dirilis tanggal 22 Maret 2011. 


Oleh karena ada banyak perusahaan yang mengembangan, bahasa ini 
kemudian distandarkan dengan nama ECMAScript oleh Netscape melalui 
Organisasi Internasional ECMA. Standar ini dipublikasikan pertama kali pada 
bulan Juni 1997 dengan nama dokumen Spesifikasi ECMA-262. Melalui 
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publikasi tersebut, semua implementasi Javascript pada tiap browser akan 


memiliki standar penerapan (pengkodean) yang sama. Saat ini standar ini telah 
mencapai rilis Edisi ke-5.1, yang dipublikasikan pada bulan Juni 2011. Setiap 
browser saat ini memiliki implementasi sendiri-sendiri untuk ECMAScript ini, 
diantaranya Internet Explorer dengan JScript, Opera dengan ECMAScript, dan 


Mozilla Firefox, Google Chrome termasuk juga Safari dengan nama Javascript. 


Selain di browser, sekarang Javascript juga sudah diterapkan pada banyak 
aplikasi lainnya seperti Windows 8 Apps (.Net Framework), Adobe Flash 
ActionScript, KDE Desktop Environment, Node.js, Qt QML, JQuery Mobile, 
Firefox OS, Ubuntu Touch dan masih banyak lagi kemungkinan implementasi 


lainnya. 


Javascript bergantung kepada browser (navigator) yang memanggil dan 
menampilkan halaman web yang tidak hanya berisi HTML tapi juga dapat berisi 
skrip-skrip Javascript. Javascript juga tidakmemerlukan penterjemah khusus 
untuk menjalankannya, karena sudah disediakan sendiri oleh browser yang 
digunakan. Lain halnya dengan bahasa“Java” yang memerlukan penterjemah 
khusus untuk menjalankannya di sisi user/klien. Berikut ini satu tabel yang 
berisi beberapa perbandingan mendasar antara Java dan Javascript. 
Javascript 
Bahasa yang dijalankan langsung Bahasa yang dijalankan oleh program 
oleh browser eksternal (Java Virtual Machine) 
diintegrasikan ke dalam browser 
Didefinisikan dengan tag «script» Didefinisikan dengan tag sapplet» 
pada halaman HTML 


Kode program bersifat terbuka dan Kode program dapat bersifat tertutup 
dapat dibaca melalui browser 


Tidak memerlukan proses kompilasi Perlu kompilasi untuk menghasilkan 


menjadi file lainnya file .class 





Javascript adalah bahasa yang “case sensitive” artinya membedakan 


penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil, 


Page | 123 


Pemrograman Web 


= 





contoh variabel atau fungsi dengan nama TEST berbeda dengan variabel 
dengan nama test. Dan yang terakhir seperti bahasa Java ataupun C, walaupun 


hal ini tidaklah wajib, setiap instruksi dapat diakhiri dengan karakter titik koma 


G). 


Penulisan Kode Javascript 
Ada beberapa cara untuk menuliskan kode Javascript di dalam 
dokumen/halaman HTML, yakni menggunakan tag <script>, menggunakan file 


eksternal, dan melalui event tertentu. 


Menggunakan tag <SCRIPT> 
Kode javascript dalam HTML dituliskan dengan menggunakan tag <script> 


dengan format sebagai berikut : 


<script lanquage="javascript”> 


Се епа о 


Atribut language di dalam іад <$СКІРТ> menunjukkan jenis bahasa yang 
digunakan dan versinya, contohnya “Javascript, “Javascript1.1“ ,“Javascript1.2" 
untuk bahasa Javascript atau bahasa lainnya, contohnya “VBSrcript“. Jika kita 
ingin menggunakan beberapa versi Javascript di dalam satu halaman HTML 
(untuk menyesuaikan dengan kompatibilitas navigator) , maka kita hanya perlu 
meletakkankode-kode Javascript tersebut (berdasarkan versinya) kedalam 


beberapa tag SCRIPT» dengan mencantumkan versi Javascriptnya. 


Menggunakan file eksternal 

Cara berikutnya adalah menuliskan kode program Javascript dalam suatu file 
teks dan kemudian file teks yang berisi kode Javascript di panggil dari dalam 
dokumen HTML (khusus Netscape mulai versi 3 keatas). Kode yang kita 


sisipkan kedalam dokumen HTML adalah sebagai berikut : 


<script language="javascript” src="lokasi/file.js”></script> 
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dimana lokasi/file.js adalah adalah lokasi dan nama file yang berisi kode 


Javascript, jika perintah tambahan SRC tidak disertakan maka tag Script akan 


mencari kode yang terletak di dalam tag Script. 


Melalui event tertentu 


Event adalah sebutan dari satu aksi yang dilakukan oleh user, contohnya 


seperti klik tombol mouse, pembahasan lebih lanjut ada di materi lainnya. 


Kodenya dapat di tulis sebagai berikut : 


<tag eventHandler="kode Javascript yang akan dimasukkan"» 


dimana eventHandler adalah nama dari event tersebut. 


Dokumentasi Program 


Seperti dalam banyak bahasa pemrograman lainnya, sangat dianjurkan untuk 


menambahkan komentar-komentar di dalam skrip atau kode program yang 


dibuat untuk keperluan dokumentasi pengembangan. Hal ini berguna antara 


lain : 


a. 


sebagai pengingat bagian-bagian khusus di dalam skrip tersebut, jika 
akan merubah sesuatu di dalamnya, mungkin beberapa bulan kemudian 
sudah tidak ingat lagi dengan detail dan alur dari skrip tersebut. 

untuk membuat orang yang tidak tahu program yang dibuat jadi 
mengerti dengan membaca petunjuk-petunjuk yang dibuat melalui 


komentar-komentar. 


Penulisan komentar di Javascript, kita bisa menggunakan cara yang sama 


dengan aturan yang ada di bahasa C/C++ ataupun Java. 


a. Untuk menulis komentar dalam satu baris kita gunakan karakter garis 


miring ganda (//). 
II semua karakter di belakang 
// tidak akan di eksekusi 


. Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan 


karakter /* dan */ 
/* Semua baris antara 2 tanda tersebut 


tidak akan di eksekusi oleh 
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kompilator */ 
Contoh program Javascript 
Pada contoh berikut ini adalah contoh skrip Javascript didalam suatu dokumen 
HTML, disini kita akan membuat satu program untuk menampilkan satu kotak 
dialog (dijelaskan lebih lanjut di bab lainnya) pada saat kita membuka dokumen 
HTML.file: halo.html 


<html> 


<head> 





<title>contoh program javascript</title> 
</head> 

<body> 

<script language="javascript"> 

akart (Wieda 190) с 

</script> 


</body> 





</html> 


Saat program ini dijalankan melalui browser, maka akan ditampilkan satu dialog 
berisikan pesan "Hallo !" tanpa tanda kutip. 

Selain dengan bentuk lengkap seperti diatas, kita juga dapat menuliskannya 
seperti berikut dengan hasil yang sama. 


file: halo_alternatif.html 


<script language="javascript"> 
AMM MA re 


</script> 


Alat Bantu Pengembangan 

Dalam mengembangan aplikasi web ada beberapa persiapan yang perlu 

dilakukan, diantaranya adalah menentukan browser dan editor yang akan 

digunakan. Saat ini sudah banyak bermunculan varian browser, yang paling 

umum diantaranya Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, 

Opera, dan Apple Safari. Hampir semuanya mendukung penggunaan 
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Javascript. Pemilihan browser dapat disesuaikan dengan selera masing- 


masing. Namun, ada baiknya menginstal lebih dari satu browser untuk 
mengetahui apakah aplikasi web yang dibuat didukung oleh sebagian besar 


browser tersebut atau tidak. 


Selain browser yang bervariasi, editor pun demikian, sekarang sudah banyak 
program editor web baik yang tekstual maupun grafis. Diantaranya yang gratis 
ada Notepad2, Notepad++, Sublime Text, Aptana dan Expression Web 4 atau 
yang berbayar dengan Adobe Dreamweaver dan Visual Studio. Bagi pengguna 
Linux dapat menggunakan Gedit, Geany atau Sublime Text. Dalam 
pengembangan aplikasi web kali ini penulis akan menggunakan Notepad++, 
aplikasinya dapat didownload pada alamat http://notepad-plus-plus.org. 
Panduan Pengembangan di Windows 

Agar dapat memaksimalkan penggunaan Notepad++ di Windows, dapat 
mengikuti panduan berikut ini : 

a. Pastikkan pada komputer telah terinstall aplikasi browser untuk melihat 
halaman web yang dihasilkan. Kalau belum bisa coba install browser 
Mozilla Firefox atau Google Chrome. 

b. Tentukan lokasi tempat semua file aplikasi web akan dikembangkan. 
Misal, di folder D:\PemrogramanWeb. 

c. Untuk Windows, pastikkan sistem menampilkan ekstensi file. Jika belum, 
lakukan langkah berikut: 

i. Untuk Windows 8 keatas: Buka Explorer, pilih menu View kemudian 
klik Options. 
ii. Untuk Windows 7 kebawah: Buka Explorer, akses menu Tools dan 
pilin Folder Options. 
ii. Pada window yang tampil pilih tab View, hapus centang pada opsi 
Hide extensions for known file types. 
iv. Terakhir klik OK. 
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General View Search 


Folder views 
You can apply he view (such as Details or corsa) 
ES that you are using for tris folder to al! folters of ths 


Apply vo Fokders Reset Folders 


Display the ful path in the title bar 
E Hoddan fies and folders 
Dont show tedden files, folders, or doves 
e Show hidden bles, folders, and dives 


Oe ES 


~ bide folder merge сопкі» 
Hide protected cpetating system bles (Recommended) 


Launch folder windows in a separa process 
Restore previous folder windows ot logon 
Y Show drive letters 





Gambar 8.1 Tampilan Folder Options pada Windows 


d. Setiap kali akan mencoba/membuat program Javascript. Buat terlebih 
dahulu filenya pada lokasi yang sudah ditentukan diatas. Di Windows 
dapat dengan klik kanan, trus pilih menu New > Text Document dan ganti 
namanya sesuai program yang akan dibuat, misalnya: halojavascript.html. 

e. Buka file tersebut dengan Notepad++ dan ketikkan programnya. 

f. Setelah selesai membuat program, untuk melihat hasilnya klik menu Run 
> pilih salah satu menu misalnya Launch in Firefox untuk menjalankan file 


dalam browser Firefox. 
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Н. Edit Search pew Encoding Langunga Sepings Macro Mum) TextfX Mogi Wadon | 
A) ta 

<input type="text’ name="nilai” 

<input type="button" ¿da"btnAmbi 

=““ambilNilai({);" /> 

<input type="text’ name="hasil” 

<script> 

function ambilNilai () | 

ег газы Dyan input ten 


var obji * document .getElema 


mengambil obyek input 


var ob)2 - document .gotE lema 


mengambi. рүек input text кесе 


var obj3 - document ,gerklementeNyTagNanme ( 





Gambar 8.2 Contoh eksekusi program web di Notepad++ 


Panduan Pengembangan di Linux 
Bagi yang ingin mengembangkan aplikasi web di Linux dapat juga mengikuti 
panduan berikut ini. 
a. Editor yang akan dijelaskan disini adalah Geany. Apabila belum 
diinstall silahkan install dengan menjalankan perintah berikut pada 
terminal. 


Ubuntu: 
sudo apt-get install geany 


OpenSuSE: 
sudo zypper install geany 


b. Tentukan lokasi pengembangan aplikasi, misalnya di folder 
/home/namauser/PemrogramanWeb. 

c. Setiap kali akan mencoba/membuat program Javascript. Buat 
terlebih dahulu filenya pada lokasi yang sudah ditentukan diatas. Di 
OpenSuSE dapat dengan klik kanan, trus pilih menu Create New > 
Text File dan ganti namanya sesuai program yang akan dibuat, 
misalnya: halojavascript.html. Untuk Ubuntu dapat menyesuaikan. 
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d. Buka file tersebut dengan geany dan ketikkan programnya. 

e. Setelah selesai membuat program, untuk melihat hasilnya klik menu 
Build > pilih Execute untuk menjalankan file dalam browser utama 
yang ada. 


gotolementsbytagnarme html - home/desurya/Pomrograman Web - Geany 


Fie Edit Search View Document Project Build Toots Help 


getelementsbytagname.htmi Xx %3 Compile 


әәчсльы Ne 


<input types text” names nilai 
cinput затон ide"btni Mako ЗМ +Р9 eke 
соне: = i Make Custom Target Shát+Ctri+F9 
4 s"toxt' 
pan a ext” names "hasi Make Object 
function anbilNilail)i 
// mengambil obyek input ti + 
var objl » document.getEle y, 


ff mengambil obyek input 
var obj2 = document .getEl 


/) mengambil obyek input ti 8 Set Build Commands 
var obj3 « document.getElementsByTagName( Input J2): 


// mengambil nilai input text pertama dan button 
маг 51 « objil.value: 
маг 52 = obj2.value; 


// menampilkan nilai pada input text kedua 
obj3.value = 51 + $2; 

) 

</5сг1рї> 





Gambar 8.3 Contoh eksekusi program web di editor Geany 


c. Rangkuman. 


Dari paparan materi pembahasan kegiatan belajar ini dibuat rangkuman materi 


sebagai berikut : 


Javascript merupakan bahasa yang dapat digunakan untuk mengolah 
halaman web. 
Program javasacript dapat ditempatkan bersamaan dengan file HTML 
ataupun secara terpisah dalam file tersendiri. 
Javascript berbeda dengan Java yang dalam implementasinya di HTML 
menggunakan tag yang lain dari Javascript. 
Komentar diperlukan dalam program untuk membantu dalam 
pengembangan aplikasi selanjutnya. 
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а. Tugas. 


Buatlah timeline sejarah perkembangan Javascript dalam bentuk dokumen 


HTML dengan tampilan sebagai berikut. 
Timeline Sejarah Javascript 





Tahun Perkembangan 




















e. Tes Formatif. 


1. Jelaskan perbedaan antara Java dengan Javascript? 

2. Apa peranan browser dalam penerapan Javascript pada suatu dokumen 
HTML? 

3. Mengapa komentar diperlukan dalam pengembangan program? 

4. Bagaimana menuliskan kode program javascript pada suatu dokumen 
HTML? 


5. Mungkinkah mengembangkan aplikasi javascript untuk aplikasi berbasis 
Desktop bukan Web saat ini? Temukan dan jelaskan. 


f. Lembar Jawaban Tes Formatif. 
LJ- 01 : 
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g. Lembar Kerja Siswa. 





Page | 133 





Pemrograman Web 


u 
E A 


a. Tujuan Pembelajaran. 








Setelah mengikuti kegiatan belajar 9 ini siswa diharapkan dapat : 
1) Mengetahui dasar-dasar pemrograman web klien 
2) Memahami pembuatan kode program dasar web klien 


b. Uraian Materi. 
VARIABEL 
Variable adalah suatu obyek yang berisi data data, yang mana dapat 
dimodifikasi selama eksekusi program. Di Javascript terdapat beberapa kriteria 
untuk penamaan variabel, seperti ditunjukkan berikut ini. 
- Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf 
kecil) atau satu karakter _ (garis bawah). 
- Nama variabel bisa terdiri dari kombinasi huruf, angka atau karakter _ 
dan $ (spasi kosong tidak diperbolehkan). 
- Nama variabel tidak boleh memakai nama-nama yang termasuk ke 
dalam kata kunci bahasa Javascript. 
Berikut ini merupakan daftar kata kunci yang ada di Javascript. 


abstract else im synchronized 
boolean enum interface tnis 
break export let throw 
byte extends long throws 
case final native transient 
catch finally New 

char float package typeot 
class for private var 
const function protected vod 
continue goto public volatile 
debugger a return while 
default implements short with 
delete import static yield 
do in super 

Gouble instanceof switch 
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Sumber: kompilasi https://developer.mozilla.org dan http://msdn.microsoft.com. 


Berikut ini adalah contoh pemberian nama variabel yang benar dan tidak benar: 


Nama variabel yang benar 
- umur 
- namaLengkap 
- luas lingkaran 
- jari2 
- Tan 


- $Ыауа 


Nama variabel yang tidak benar 


- Nama Lengkap > Ada spasi kosong 
-  Truangan > Dimulai dgn angka 
- email@website.com > Karakter @ 
- top-level-domain > Karakter - 

> 


- function Kata kunci Javascript 
Di Javascript kita menggunakan sistem case sensitive yang artinya membedakan 
nama variabel dengan huruf besar dan huruf kecil, oleh karena itu biasakanlah 
memberikan nama variabel dengan aturan yang sama. 
Ada beberapa teknik pemberian nama yang dapat digunakan, diantaranya 
adalah 
- Camel Case, dengan teknik untuk nama variabel yang lebih dari satu kata 
akan digabungkan tanpa garisbawah dan setiap huruf pertama dari tiap 
kata dituliskan dalam huruf kapital. Sedangkan untuk huruf pertama dari 
kata pertama dapat juga ditulisakan menggunakan huruf kecil. Contoh: 
AsalSekolah, SuhuUdara, luasPersegiPanjang, namaLengkap, dan 
sebagainya. 
- Notasi Hungaria, disini diawal dari nama variabel akan ditambahkan tipe 
data yang ditampungnya, seterusnya dapat menggunakan notasi camel 


case. Contoh: stringNamaLengkap (atau lebih pendek, strNamaLengkap, 
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string menunjukkan variabel ini berisi data alfanumerik), intUmur (int 


menunjukkan variabel ini menyimpan bilangan bulat), dan sebagainya. 

- Selain dengan camel case, variabel dengan nama lebih dari satu kata 
dapat juga dibuat dengan menambahkan garisbawah sebagai 
penghubung antar katanya. Contoh: asal_sekolah, luas_persegi, 


nama_lengkap, dan sebagainya. 
PEMBUATAN VARIABEL 
Penulisan variabel Javascript sangatlah fleksibel, dan tidaklah terlalu rumit dan 
ketat, sehingga akan jarang menerima pesan error karena variabel yang tidak 
sesuai. 
Ada dua istilah yang biasa digunakan dalam pembuatan variabel, yakni deklarasi 
dan inisialisasi. Deklarasi digunakan untuk menunjukkan proses permintaan 
alokasi memori oleh Javascript ke sistem operasi. Sedangkan inisialisasi 
digunakan untuk memberikan nilai awal bagi variabel tersebut. 
Format deklarasi (pembuatan) variabel di Javascript adalah sebagai berikut : 
var nama variabel nya ; 
atau, dengan tambahan inisialisasi : 
var mama variebel = milai p 


atau untuk deklarasi variabel lebih dari satu dalam satu baris perintah : 


var neme variabell, nama variabel3 = ШШЕ СЕ енн Р = 


nama variabelN ; 
contoh : 
var umur; 


var panjang = 23; 
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mk 


мас а 


Ша И Еш п; 


<script language="javascript"> 


var nil 


var ni 


nilai 


al; 














lai? = 3; 





= 25 


documenti werte (nallan ааган) 


Sii 


TIPE DATA 


Di javascript data yang dapat disimpan dalam suatu variabel dikelompokkan 


menjadi tiga jenis, yaitu : 


Bilangan/numerik, bulat atau desimal, yang kita sebut sebagai integer 
atau float 

Kata/kalimat (kumpulan huruf/karakter) : kita sebut string 

Boolean : suatu variabel yang mempunyai dua nilai dan berfungsi untuk 
memeriksa suatu kondisi : 

true : jika kondisinya benar 


false : jika kondisinya salah 


INTEGER (BILANGAN BULAT) 


bilangan bulat dapat ditampilan dalam beberapa basis berikut ini : 


Basis desimal, integer di tuliskan dalam urutan unit bilangan (dari O 
sampai dengan 9), permulaan bilangan tidak boleh dimulai oleh angka 0. 
Basis heksadesimal, dituliskan dalam urutan unit bilangan dari 0 sampai 
dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai 
dengan f), permulaan bilangan dimulai oleh 0x atau 0X. 

Basis oktal, dituliskan dalam urutan unit angka dari 0 sampai dengan 7, 


permulaan bilangan dimulai dengan angka 0. 


FLOAT (BILANGAN DESIMAL) 


Bilangan desimal biasa disebut juga sebagai bilangan pecahan atau bilangan 


yang dapatdituliskan menggunakan tanda koma. Bilangan ini juga bisa di tuliskan 


denganbeberapa cara berikut : 


Page | 137 


Pemrograman Web 





Kan 


- Bilangan bulat desimal : 895 
- Bilangan dengan tanda koma : 895,12 
- Bilangan pembagian : 27/11 
- Bilangan eksponensial : bilangan dengan tanda koma, kemudian diikuti 
oleh huruf e(atau E), kemudian diikuti oleh bilangan bulat yang artinya 
pangkat dari bilangan 10 (+ atau -, pangkat postitif atau negatif), contoh : 
var а = OS A 
var O- eor OET MOR 


var c = .25e-2 ; 


STRING 

String adalah kumpulan dari karakter/huruf, nilai variabel string selalu diapit 
dengan tanda (') atau ("), kedua tanda tersebut harus digunakan secara 
berpasangan dan tidak bisa digunakan secara sendiri-sendiri atau bersilangan. 
Berikut ini adalah beberapa cara untuk mendeklarasikan variabel string : 

уак а = "Наше"; 


var b = 'Sampai Ketemu Lagi !'; 


Contoh yang tidak sesuai, berikut ini : 
var a = Hallo”; 


var v = “Sampai Ketemu Lagi !'; 


Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan 
bagian dari karakter yang tidak terlihat (non visual) dan juga untuk 
menghindarkan kemungkinan browser "mengalami kebingungan" dalam 
membedakan antara string dan skripnya sendiri, karakter spesial ini 
menggunakan simbol antislash (1), beberapa contoh karakter spesial tersebut: 

- An: kembali ke baris awal 

- \г: menekan tombol ENTER 

-  N: tab 

-  N" tanda petik ganda 

-  N tanda petik tunggal 

-  W karakter antislash 
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Contoh, misalnya kita ingin menyimpan kalimat berikut ini : 


Ada apa di dalam "c:\windows\" 


Kita harus menuliskannya dalam bentuk berikut ini di dalam Javascript : 
var Judul = "Ada apa di dalam \"c:\\windows\\\""; 


Atau bisa juga dengan cara berikut ini (menggunakan tanda petik tunggal) : 
Judul = 'Ada apa di dalam "c:\\windows\\"'; 


Memanipulasi variabel String, dapat dilakukan dengan menggunakan metode- 
metode yang ada pada variabel string tersebut. Metode-metodenya dapat dilihat 


pada materi tentang Fungsi. 


BOOLEAN 
boolean adalah satu variabel khusus yang berguna untuk mengevaluasi suatu 
kondisi tertentu, oleh karenanya boolean mempunyai dua nilai : 

- True: diwakili oleh nilai 1 


- False : diwakili oleh nilai O 


KONVERSI JENIS VARIABEL 

Meskipun Javascript memungkinkan pengaturan perubahan jenis variabel secara 
transparan,kadang kadang kita perlu juga untuk melakukan konversi jenis 
variabel secara paksa. parselnt() dan parseFloat() merupakan dua fungsi yang 


dapat digunakan untuk konversi ini. 


Fungsi parselnt() 

Fungsi ini mungkinkan merubah satu variabel yang dilewatkan dengan parameter 
tertentu (bisadalam bentuk string ataupun dalam bentuk bilangan dalam basis 
yang disebutkan di parameterkedua) menjadi bilangan bulat. Sintaksnya adalah 
sebagai berikut : 


parseInt (string|, basis]); 


Agar supaya fungsi parselnt() mengembalikan nilai bilangan bulat, maka 


parameter yangdilewatkan harus dimulai dengan karakter bilangan [0-9], prefiks 
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hexadesimal 0x, dan/ataukarakter #,-,e,dan E. Selain daripada itu maka fungsi 


parselnt() akan mengembalikan nilai NaN(Not a Number). Jika karakter 
berikutnya tidak valid, maka akan diabaikan oleh fungsiparselnt(), dan akan 
ditampilkan terpotong jika di bagian depan karakter valid dan bagianbelakang 
karakter tidak valid. 

Berikut ini salah satu contoh penggunaan fungsi parselnt() : 

уа а= "їз 

vea o = WSEH 

document.write (a+b + "<BR>"); // hasil 123456 





document.write (parseInt (a)+parseInt (b) + "<BR>"); // hasil 
579 


Table 1. Contoh penggunaan fungsi parselnt() 
























































parselnt(" 128.34"); 128 
parselnt("12.3E-6"); 12 
parselnt("12E+6"); 12 
parselnt("Halo"); NaN 
parselnt("24Halo38"); 24 
parselnt("Halo3824"); NaN 
parselnt("AF8BEF"); NaN 
parselnt("0284"); 284 
parselnt("0284",8), 2 
parselnt("AF8BEF",16); 11504623 
parselnt("AB882F", 16); 11241519 
parselnt("OxAB882F"); 11241519 
parselnt("OxAB882F", 16); 11241519 
parselnt("001001 10"); 100110 
parselnt("00100110",2); 38 
parselnt("00100110",8); 32840 
parselnt("00100110",10); 100110 
parselnt("00100110",16); 1048848 
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Fungsi parseFloat() 


Adalah satu fungsi dasar dari Javascript yang memungkinkan merubah variabel 
yang dilewatkandengan parameter tertentu menjadi bilangan desimal, Sintaks 
dari fungsi parseFloat() adalah sebagai berikut : 


parseFloat (string); 


Table 2. Contoh penggunaan fungsi parseFloat() 


























parseFloat("128.34"); 128.34 
parseFloat("128,34"); 128 
parseFloat("12.3E-6"); 0.0000123 
parseFloat("Halo"); NaN 
parseFloat("24.568Halo38"); | 24.568 
parseFloat("Halo38.24"); NaN 
parseFloat("AF8BEF"); NaN 
parseFloat("0284"); 284 
parseFloat("0xAB882F"); 11241519 














OPERATOR 
Operator adalah simbol yang dapat digunakan untuk memanipulasi nilai suatu 
variabel, dengan kata lain melakukan operasi-operasi, mengevaluasi, dan lain- 


lainnya. Ada beberapa jenis operator : 
OPERATOR PENGHITUNGAN 


Operator penghitungan digunakan untuk memodifikasi nilai dari variabel secara 


matematika. 


Table 3. contoh penggunaan fungsi Operator Perhitungan 





+ Menjumlahkan dua nilai у=х+3 10 
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Mengurangi nilai suatu variabel 
- у=х-3 4 
dengan nilai lain 
Í Mengalikan dua bilangan y=x*3 21 
Membangi nilai suatu variabel 
/ ME y=x/3 2.333 
dengan nilai lainnya 
Memberikan suatu nilai terhadap mo 34 
E variabel dikiri operator ini y 
Mencari sisa hasil bagi daru dua 
% _ y=x%3 1 
nilai 
Menjumlahkan nilai variabel 
+= dengan nilai tertentu dan hasilnya х += 3 10 
disimpan di variabel yang sama 
x-=3 4 
Memiliki prinsip yang sama dengan 
-=, *= = x 53 21 
operator += 
x /=3 2.333 
Digunakan untuk menambahkan 
X++ 
++, -- atau mengurangi 1 nilai suatu 
X-- 
variable 

















OPERATOR LOGIKA (BOOLEAN) 
Operator jenis ini memungkinkan kita untuk memverifikasi apakah beberapa 


kondisi sudah benar 


Table 4.contoh penggunaan fungsi Operator Logika 


Membandingkan true, jika x bernilai 7 
== nilai di kiri dan x == false, jika x bernilai bukan 
kanan operator ini 7 








Sama dengan ==, 


tambahannya true, jika x juga adalah 
=== untuk x === “7” string bukan integer dan 
menyamakan tipe nilainya 7. 


datanya juga 
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Mengetahui 
true, jika nilai x bukan 7 
!= apakah dua nilai х!=7 
| false, jika nilai x adalah 7 
tidak sama 
Mencari true, jika nilai bukan 7 dan 
ketidaksamaan a X bukan string 
nilai dan tipe false, jika nilai x adalah 7 
datanya dan x adalah string 
Membandingkan 
apakah bilangan true, jika x lebih kecil dari 7 
< yang dikiri lebih х<7 false, jika x lebih besar 
kecil dari yang atau sama dengan 7 
dikanan operator 
Membandingkan 
apakah bilangan true, jika x lebih kecil atau 
yang dikiri lebih sama dengan 7 
<= х<=7 
kecil atau sama false, jika x lebih besar dari 
dengan yang 7 
dikanan 
Prinsipnya 
>, >= kebalikan dari 
operator < dan <= 
true, jika nilai x lebih besar 
dari 7 ATAU x sama 
Logika OR untuk 
Е dengan 7 
|| dua kondisi yang | x > 7 || x == 
. false, jika nilai x tidak lebih 
diberikan 
besar dari 7 DAN nilai x 
tidak sama dengan 7 
true, jika nilai x lebih besar 
dari 7 DAN x lebih kecil 
р dari 10 
&& Logika AND x>788x< 10 











false, jika nilai x tidak lebih 
besar dari 7 ATAU x tidak 
lebih kecil dari 10 
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Logika NOT, 


membalikan nilai 
! I(x == 7) dengan 7 
boolean suatu 


true, jika nilai x tidak sama 


false, jika nilai x adalah 7 
variable 

















OPERATOR STRING 

Operator + pada data berjenis string digunakan untuk menggabungkan dua 
variabel/nilaistring. Perlu dicatat juga bahwa var tes ='a'+'b' adalah sama dengan 
var tes ='ab'. 

Contoh : 

var tes ='a'; 

var tes2 = tes +'b'; //hasilnya: tes2 akan bernilai string 


N ab ” 


PRIORITAS 

Pada saat akan melakukan operasi dengan banyak operator dalam satu waktu, 
browser harus tahu dengan urutan mana operasi dilakukan berdasarkan prioritas 
dari operator. Prioritas ini menunjukkan urutan suatu operator dieksekusi oleh 
browser. Berikut ini adalah tabel tingkat prioritas dari seluruh operator mulai dari 


yang tertinggi. 


Table 5. contoh penggunaan fungsi Urutan eksekusi operator 




















1 -00 

2 ++ -- - ~ | delete new typeof void 
3 */% 

4 t-4 

5 <<>>>>> 

6 <<= >>= instanceof 

7 == 1====1== 
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10 | 





11 && 





12 || 





13 ?: 





14 = += -= *= /= %= << >> >>>= &= A= |= 





15 ; 














Contoh : 

var hasıl = 78 = 9 u 3 

document.write (hasil);// hasilnya: 702 
document тае отау 


[ел = ТӨ * (9 + 3) 8 





document.write (hasil); // hasilnya: 936 


c. Rangkuman. 
Dari kegiatan belajar ini dapat dibuat ringkasan materi sebagai berikut : 
"= Dasar-dasar dalam pemrograman javascript meliputi variabel, tipe data, 
dan operator. 
= Setiap operator yang ada memiliki prioritas dalam eksekusinya apabila 


ditempatkan bersama dalam satu operasi. 


d. Tugas. 

1. Buatlah program javascript untuk menghitung luas lingkaran jika diketahui 
jari-jarinya adalah 2.3? 

2. Diketahui variabel B bernilai 2.3, gunakan program javascript untuk 
memisahkan/mengambil bagian berkoma dari bilangan diatas sehingga 
misal, variabel C akan bernilai 0.3? 

3. Berapakah nilai rata-rata dari kumpulan nilai berikut: 

2.3 34 45 67 7.8 8.9 9.10 10.1 

Gunakan program javascript untuk menghitung nilai rata-ratanya? 
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e. Tes Formatif. 


Apakah yang dimaksud dengan variabel? 

Apa saja data yang dapat diolah oleh Javascript? 

Apa perbedaan antara operator + pada operasi string dan numerik? 
Apa perbedaan antara operator = di pemrograman dan matematika? 
Mengapa dalam prioritas operator tanda () mendapat prioritas tertinggi? 


A AS 


f. Lembar Jawaban Tes Formatif. 
LJ- 01: 
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g. Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 10 ini siswa diharapkan dapat : 
1) Mengetahui keberadaan nilai jamak dalam suatu program 


2) Memahami penggunaan array dalam program 


b. Uraian Materi. 

Variabel-variabel di JavaScript hanya bisa menyimpan satu data pada suatu 
saat. Adanya kecenderungan yang besar untuk memanipulasi sejumlah data 
dalam satu variabel membuat konsep variabel tersebut menjadi tidak cukup. 
Sebagai solusinya, JavaScript menghadirkan struktur data yang memungkinkan 
menyimpan himpunan/kelompok data dalam satu variabel khusus yang disebut 


Array. 


Array, adalah satu variabel yang dapat berisi banyak data yang independent. 
Data yang disimpan diberikan indeks tertentu atau menggunakan nomer urut 
mulai dari O.Indeks ini nantinya dapat digunakan untuk mengakses data yang 


disimpan dalam array tersebut. 


JENIS-JENIS ARRAY 
Array Multidimensi 
Array yang hanya berisikan nilai-nilai tunggal disebut sebagai array monodimensi 


atau unidimensi. Berikut merupakan ilustrasi dari array monodimensi tersebut. 


Data Nilai1 Nilai2 Nilai3 Nilai4 





Perhatian : 
Indeks ini akan diberikan secara otomatis oleh interpreter javascript, dimulai dari 
elemen/data pertama dengan indeks 0. Dalam suatu array dengan n elemen, 


maka elemen ke-n akan mempunyai indeks n-1. 
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Jika elemen suatu array berisikan array lainnya, maka array tersebut termasuk 


array multidimensi. Berikut ilustrasinya. 





0 1 0 1 2 


Data Nilai2 Nilai3 
Nilai1 | Nilai2 Nilai1 | Nilai2 | Nilai3 












































Array Asosiatif 

Indek dalam array selain ditentukan secara otomatis oleh sistem dan selalu 
dimulai dari 0, juga dapat dimodifikasi dengan menggunakan kata (string) atau 
nilai tertentu. Tabel dengan indeks termodifikasi ini kita kenal dengan nama array 


asosiatif. Berikut adalah ilustrasinya. 





Data 11918 1 114.29 
PEMBUATAN ARRAY 
Terdapat beberapa cara yang dapat digunakan untuk membuat array di 
Javascript. 
var таз ешки к=н сака 1”, Ycaca 2”, "caera 3%, Ndara AUT]: 


var TabelKu = new Array("data 1", "data 2", "data 3", "data 


200) 5 





var TabelKu = new Array(); 


Dua cara yang pertama menunjukkan bahwa array dibuat dengan langsung 
memberikan nilainya, sedangkan pada cara yang terakhir array dibuat tanpa 
data. 


PENGAKSESAN DATA DALAM ARRAY 


Pengaksesan data atau elemen di dalam tabel dapat dilakukan dengan 


menuliskan nama tabel diikuti tanda kurung siku yang berisi indeks dari elemen. 
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var arrayHewan = ["Buaya", "Harimau", "Gajah", "Singa", 


"Jerapah", "Zebra"]; 


document.write ( "elemen ke 4 dari array adalah " + 
arrayHewan[3] ); 
//nasil: "elemen ke 4 dari array adalah Singa" 





MENYIMPAN DATA PADA ARRAY 

Penyimpanan data dalam array dilakukan dengan menuliskan nama array, di ikuti 
dengan nama indeks dalam kurung, dan memasukkan nilai datanya, seperti 
contoh berikut. 


arrayTes[0] = "Hallo"; 
arrayTes["Andry"] = 10; 
arrayTes|"Sandra") = 47; 


Apabila indeks yang digunakan untuk menunjuk elemen dalam array tersebut 
sudah memiliki data sebelumnya, maka data tersebut akan hilang dan digantikan 


dengan data baru yang diberikan. 


c. Rangkuman. 
Dari kegiatan belajar ini dapat dibuat rangkuman materi sebagai berikut : 
= Array, konsep yang dikembangkan untuk memungkinkan suatu variabel 
menampung lebih dari satu data dalam satu waktu. 
= Setiap data dalam array disimpan dan diberikan index numerik mulai dari 
O untuk elemen pertama dan index n — 1 untuk elemen ke-n. 
= Seperti layaknya variabel, pada saat menyimpan data pada index tertentu 
dari array, apabila sebelumnya ada data yang disimpan disana, data lama 


tersebut akan dihapus dan digantikan dengan data yang baru. 


d. Tugas. 
1. Gunakan konsep array diatas untuk menampung data bulan dan zodiak 
dalam array masing-masing? 
2. Diketahui himpunan namaHari = “Senin”, “Selasa”, “Rabu”, “Kamis”, 
“Jumat”, “Sabtu”, “Minggu”) dan himpunan bilanganBulat = (11, 12, 13, 
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14, 15, 16, 17), memiliki relasi satu-satu, dimana setiap satu bilangan 
bulat berpasangan tepat dengan satu namaHari, seperti gambar dibawah. 
Buatlah program javascript untuk menunjukkan relasi ini, sehingga 
apabila bilangan bulat yang dipilih adalah 12, maka hari yang ditampilkan 
adalah “Selasa”. 

Dibawah ini adalah contoh potongan kode yang mampu menghasilkan 
program diatas. Pada baris terakhir document.write() akan menampilkan 


nilai dari variabel elemenHari yakni “Selasa”. 


var elemenBilBulat = 12; 





W. 
r 


var elemenHari = 


document.write (elemenHari); 


e. Tes Formatif. 


1. Apakah yang dimaksud dengan array? 

2. Jelaskan jenis array yang dapat dihasilkan di Javascript? 

3. Sebutkan mekanisme operasi apa saja yang dapat dilakukan terhadap 
suatu array? 

4. Apa yang terjadi pada suatu elemen dari array apabila ada data baru 
yang disimpan disana? 

5. Mungkinkah membuat suatu array di Javascript dengan index elemen 
pertama dimulai dari 1? 


f. Lembar Jawaban Tes Formatif. 
LJ- 01 : 
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g. Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 11 ini siswa diharapkan dapat : 
1) Mengetahui format percabangan dalam program 


2) Memahami penerapan percabangan dalam program 


b. Uraian Materi. 

Struktur Kontrol 

Struktur kontrol merupakan konsep pemrograman dikembangkan sedemikian 
rupa sehingga dapat digunakan untuk menghasilkan keluaran tertentu sesuai 
nilai-nilai dari variabel-variabel yang ada. Struktur kontrol dapat juga diartikan 
sebagai rangkaian perintah yang dapat digunakan untuk mengendalikan alur dari 
program. Secara alur, program memiliki tiga jenis alur, yakni berurutan, berulang, 


dan bercabang. 


Struktur berurutan dapat digambarkan sebagai kumpulan program yang 
dijalankan mengikuti alur tertentu dapat secara vertikal dari atas ke bawah atau 
mengikuti alur yang sudah ditentukan tanpa adanya kondisi-kondisi khusus yang 
memungkinkan adanya pilihan alur. Struktur bercabang ataupun berulang 
berguna untuk menjelaskan alur program yang memiliki kondisi-kondisi khusus 
ini. Struktur percabangan dapat digunakan untuk mengeksekusi bagian tertentu 
dari program apabila suatu kondisi terpenuhi. Demikian juga dengan perulangan, 
dapat digunakan untuk menjalankan beberapa kali suatu bagian tertentu dari 


program dengan terpenuhinya suatu kondisi. 


Struktur Percabangan 

Konsep percabangan dalam pemrograman mirip seperti konsep percabangan di 
jalan raya, yang penentuan arahnya ditentukan berdasarkan tujuan dari user. 
Arah disini menunjukkan bagian program yang akan dieksekusi, sedangkan 
tujuan merupakan data masukan yang digunakan percabangan untuk mengambil 


keputusan. Secara umum percabangan digambarkan sebagai berikut. 
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Kode program sebelumnya 


Apabila kondisi terpenuhi 





Var & .... 


Apabila kondisi tidak 
terpenuhi 


document.write(... 





Kode program sesudahnya 


Gambar 11.1 Gambaran umum struktur percabangan 


Dari gambar diatas dapat dilihat, bahwa apabila suatu kondisi terpenuhi maka 
blok program dalam kondisi tersebut akan dijalankan. Jika dituliskan dalam 


format kode program dinyatakan seperti berikut ini : 





Terpenuhinya suau kondisi ini secara pemrograman berarti bahwa kondisi 
tersebut memiliki nilai boolean true. Blok program yang akan dijalankan 
ditempatkan di dalam kurung kurawal. Berikut ini merupakan contoh program 
dengan kondisi yang akan menghasilkan nilai true atau false sesuai input umur 


yang diberikan. 
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umur = parselnt (umur); 


aie ( wine < 2OQ у 4 


alert ( "Kamu belum dapat mengikuti pemilu" ); 


Kondisi pada program diatas menunjukkan bahwa apabila input dari user bernilai 
lebih kecil dari 20, maka kode dalam blok if tersebut akan dijalankan, yakni 


menampilkan pesan "Kamu belum dapat mengikuti pemilu" tanpa tanda kutip. 


Pembuatan kondisi dilakukan dengan menggunakan operator logika. Daftar 
operator logika dapat dilihat kembali pada tabel operator logika di materi tentang 
Dasar Pemrograman Web Klien. Pembuatan kondisi lebih dari satu dapat 
dilakukan dengan menggunakan kombinasi operator logika yang ada, misalnya 
kita ingin menampilkan pesan "Kamu mungkin adalah siswa SMA/K" apabila 
umur dari siswa tersebut lebih besar dari 15 dan lebih kecil dari 21 atau dapat 
juga dikatakan bahwa umurnya diantara 16-20, programnya dituliskan seperti 
berikut. 

Var Omur; 

umur = prompt ("masukkan umur anda?"); 

umur = parselnt (umur); 

I (Bra Ба шта с ЭЛ у í 


alert ( "Kamu mungkin adalah siswa SMA/K" ); 


Contoh program lainnya. 


var olahraga; 

olahraga = prompt ("masukkan olahraga yang kamu sukai?"); 
if ( olahraga == "terjun payung" || olahraga == "sepeda 
gunung" || olahraga == "panjat tebing" ) 

{ 


alert ("Kamu menyukai olahraga ekstrim"); 
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Berikut ini merupakan format lainnya yang dapat digunakan untuk menerima 


kondisi yang tidak sesuai. 





Untuk kondisi yang lebih dari satu dapat juga dibuat menggunakan format 
berikut. 





Switch 
Switch merupakan bentuk lain dari percabangan. Konsep ini berguna apabila 
kondisi yang akan ditentukan memiliki nilai tertentu. Format dari switch adalah 


sebagai berikut. 
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Contoh kasus untuk format ini adalah pada pemilihan menu layanan isi ulang, 
seperti contoh berikut : 





Pada contoh program diatas apabila user memilih 1, maka akan ada pesan 


"Jumlah pulsa anda adalah sembilan belas ribu rupiah" yang ditampilkan. Apabila 
pilihannya tidak ada dalam blok switch-case tersebut maka bagian default yang 
akan dijalankan. 


Page | 159 


Pemrograman Web 


= 





Pernyataan break pada program diatas digunakan untuk keluar dari blok case 


atau default yang terpilih. Apabila tidak terdapat break maka blok case dan/atau 


default dibawahnya akan turut dieksekusi. 


c. Rangkuman. 


Dari kegiatan belajar diatas dapat dibuat rangkuman materi sebagai berikut : 


Struktur kontrol dikembangkan untuk membuat program mampu 
menghasilkan output yang beragam tergantung input yang diberikan oleh 
user. 

Percabangan merupakan salah satu bentuk struktur kontrol yang 
memungkinkan untuk menjalankan bagian tertentu dari program apabila 
kondisinya terpenuhi. 

Selain menggunakan if-else, bentuk implementasi lain dari percabangan 
adalah dengan menggunakan switch. Switch dapat digunakan pada 


kasus dimana input yang dikondisikan memiliki nilai tertentu. 


d. Tugas. 


1. 


Buatlah program untuk dapat mengetahui index berat badan seseorang 
beserta pengelompokkannya? 
Buatlah program untuk mengetahui zodiak dari seseorang berdasarkan 


input tanggal lahirnya? 


e. Tes Formatif. 


1. 
2. 
3. 


Apa yang dimaksud dengan struktur kontrol dalam pemrograman? 
Apakah perbedaan antara percabangan if-else dengan switch? 
Mungkinkah menggunakan variabel string sebagai variabel dalam kondisi 
blok switch? Jelaskan. 

Mungkinkah ada blok switch dalam blok if-else atau sebaliknya dalam 


program? Tunjukkan dengan menggunakan contoh. 


f. Lembar Jawaban Tes Formatif. 
LJ- 01 : 
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g. Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 








Setelah mengikuti kegiatan belajar 12 ini siswa diharapkan dapat : 
1) Mengetahui format perulangan dalam program 
2) Memahami penerapan perulangan dalam program 


b. Uraian Materi. 

Struktur Kontrol Perulangan 

Perulangan merupakan struktur yang memungkinkan untuk menjalankan kode 
program yang sama beberapa kali dengan menggunakan suatu kondisi tertentu. 
Perulangan dalam javascript memiliki tiga bentuk, yakni perulangan for, while dan 
do-while. 


Perulangan for 
Perulangan ini memiliki bentuk sebagai berikut : 


for ( inisialisasi; kondisi; peubah | 


baris program 1; 





beris program 2p 


Perulangan while 
Perulangan ini memiliki bentuk sebagai berikut : 


while ( kondisi ) ( 


kode program yang ingin dijalankan berkali-kali: 


Perulangan do-while 
Perulangan ini memiliki bentuk sebagai berikut : 
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do { 


kode program yang ingin dijalankan berkali-kali; 


) while( kondisi ); 


Dari ketiga bentuk perulangan diatas hanya for yang memerlukan pernyataan 
inisialisasi dan peubah. Inisialisasi disini digunakan sebagai bagian penentuan 
variabel yang akan digunakan untuk mengendalikan jumlah perulangan yang 
akan dilakukan. Peubah adalah operasi aritmatika yang dapat dilakukan untuk 
mengubah nilai variabel penentu tersebut. Sedangkan kondisi disini digunakan 
untuk menentukan kapan suatu blok perulangan dijalankan berdasarkan nilai dari 
variabel penentu tersebut. Cara kerja dari perulangan for tersebut dapat 


digambarkan dengan menggunakan diagram alur berikut. 






inisialisasi for 


kode dalam for 





tidak terpenuhi 


Gambar 12.1 Alur kerja program untuk strutur percabangan 


Secara umum untuk setiap kasus perulangan dapat diterapkan dengan 
menggunakan ketiga bentuk tersebut. Contohnya, kita dapat membuat 
perulangan untuk menampilkan pesan "Halo javascript" hingga 3 kali dengan 


menggunakan ketiga perulangan tersebut. 
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for (ware 1 = 0g i < 3g im) í 


document .write("Halo Javascript 1<br>"); 


var Jj = 0 
MAI (ES O E 
document .write("Halo Javascript 2<br>"); 


7 += 18 


var К = 0; 
do 1 
document .write("Halo javascript 3<br>"); 


¡e 





nee, 


c. Rangkuman. 
Dari paparan kegiatan penerapan struktur kontrol perulangan dapat dibuat 
ringkasan materi sebagai berikut : 
= Perulangan merupakan struktur yang memungkinkan untuk menjalankan 
kode program yang sama beberapa kali dengan menggunakan suatu 
kondisi tertentu. 
= Perulangan dalam javascript memiliki tiga bentuk, yakni perulangan for, 
while dan do-while. 
=" Inisialisasi disini digunakan sebagai bagian penentuan variabel yang akan 
digunakan untuk mengendalikan jumlah perulangan yang akan dilakukan. 


= Hanya for yang memerlukan pernyataan inisialisasi dan peubah. 


d. Tugas. 
Buatlah program untuk menghitung nilai rata-rata, mencari nilai maksimal dan 


minimal dari suatu kumpulan nilai? 


е. Tes Formatif. 
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1. Apa yang dimaksud dengan perulangan dalam program? 

2. Sebutkan jenis-jenis perulangan yang kalian ketahui? 

3. Bentuk perulangan mana yang paling baik dalam menampilkan data array 
menurut pendapat kalian, berikan alasannya? 

4. Dari ketiga bentuk perulangan yang telah dijelaskan, manakah 
perulangan yang akan dijalankan jika kondisi awalnya tidak benar (false)? 
Berikan penjelasannya. 

5. Mungkinkah menggunakan perulangan do-while tanpa tanda kurung 
kurawal? 


f. Lembar Jawaban Tes Formatif. 
LJ- 01: 
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g. Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 13 ini siswa diharapkan dapat : 
1) Mengetahui kode program fungsi 


2) Memahami penerapan fungsi dalam pengembangan aplikasi 


b. Uraian Materi. 

Fungsi dalam pemrograman merupakan suatu mekanisme yang digunakan untuk 
mengelompokkan program dalam menyelesaikan suatu kasus, proses atau 
rumus aritmatika tertentu. Dengan pengertian yang sama pengelompokkan kode 
ini juga sering disebut subprogram (program bagian), prosedur ataupun metode. 
Dalam javascript semuanya itu disebut fungsi, karena Javascript hanya 


menyediakan satu kata kunci untuk membuat fungsi ini, yaitu function. 


Fungsi dalam proses pemanggilannya (eksekusi) ada yang membutuhkan data 
tertentu agar dapat berjalan. Data tertentu yang perlu diberikan saat pemanggilan 
fungsi ini dikenal dengan nama parameter. Setiap fungsi dapat tidak memiliki 


atau memiliki lebih dari satu parameter. 


Aturan penamaan fungsi mengikuti aturan penamaan variabel. Bentuk dari blok 


fungsi adalah sebagai berikut. 


Ana о ата SN O ran Sol armo: ШИИ, 


parameterN ) 


kode program sebagai definisi fungsi 


ie el tama dar, 


Keterangan : 


nama fungsi: nama dari fungsi yang akan dibuat. 
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parameter1...N: merupakan syarat yang diperlukan oleh fungsi tersebut untuk 


dapat berjalan. Suatu fungsi juga dapat tidak memiliki parameter, artinya dapat 
dijalankan tanpa syarat. 

return: perintah untuk membelikan hasil operasi dari fungsi ke user. 

nilai balik jika ada: nilai hasil operasi dari fungsi. Suatu fungsi dapat juga tidak 
memiliki nilai balik. Jika tidak memiliki nilai balik maka pernyataan return dapat 
ditiadakan. 


Untuk menjalankan program yang ada dalam fungsi tersebut kita dapat 


memanggilnya dengan cara, sebagai berikut : 














verkHasil = nema Tungsi ( nılal parameteri, тов ааа paramerer2, 
op Kila parameter ) £ 
Keterangan : 


varHasil: variabel yang dapat digunakan untuk menampung nilai balik dari fungsi 


yang dipanggil bila ada. 


Dilihat dari hasil akhirnya fungsi dalam javascript dibedakan jadi dua, yakni fungsi 
yang memiliki nilai balik dan tidak. Nilai balik disini maksudnya adalah nilai hasil 
operasi yang dijalankan didalam fungsi diberikan ke bagian program lainnya 
untuk diproses lebih lanjut. Nilai balik dalam javascript dinyatakan dengan 
menggunakan kata kunci return. Contoh kasusnya dalam program penghitung 
luas dan volume limas. Dimana dalam perhitungan volume juga terdapat 
menyertakan perhitungan luas didalamnya. Dengan kata lain untuk menghitung 
volume limas kita harus menghitung luas alasnya terlebih dahulu. Dalam 


program, proses ini diterjemahkan sebagai berikut. 


var panjang = 5; 





var lebar - 3; 
var tinggi = 4; 
var luasAlasj 








var volume: 
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Apabila diubah dalam bentuk fungsi program diatas akan menjadi. 





Contoh : fungsi tanpa nilai balik. 
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Contoh fungsi tanpa parameter. 


function sayHalo() { 
ает (аго у 

} 

sayHalo (); 


PUSTAKA BAWAAN JAVASCRIPT 

Fungsi alert(), prompt() dan parselnt() yang telah digunakan sebelumnya 
merupakan beberapa fungsi bawaan yang sudah disertakan dalam javascript. 
Fungsi tersebut menjadi bagian dari suatu kumpulan fungsi yang dikenal dengan 
Obyek. Ada banyak obyek dalam Javascript. Obyek ini tidak hanya memiliki 
fungsi namun juga memiliki konstanta-konstanta seperti PI pada obyek Math. 
Berikut ini beberapa obyek dasar yang dapat digunakan untuk mengolah data 


dalam javascript. 


Obyek String 


Obyek untuk mengolah data dalam bentuk alfanumerik (string) di Javascript. 


charAt() Pengambilan satu karakter dari suatu string. 
Contoh: 

var nama = "Budi"; 

var posisiKarakter = 2; 


var k - nama.charAt(posisiKarakter), // k akan bernilai 'd' 





indexOf() Mencari posisi string dalam string tertentu. 

Contoh: 

var nama = "SMK Negeri"; 

var posNegeri = nama.indexOf("Negeri"); // posNegeri akan 


bernilai 4 





lastIndexOf() Mirip seperti indexOf(), fungsi ini mencari posisi terakhir dari 








kata yang ditentukan dalam suatu string tertentu, yang 
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dapat saja mengandung lebih dari satu untuk kata yang 


dicari. 





replace() 


Mengganti kata tertentu dari suatu string. 

Contoh: 

var kalimat = "Java adalah bahasa skrip untuk web. Java 
bersifat multiplatform."; 


var kalimatBaru = kalimat.replace("Java", "Javascript"); 





split() 


Memecah suatu string menjadi kumpulan string yang 
disimpan dalam format array. 

Contoh: 

var sms = "BUDI#17#Indonesia Raya"; 

var hasil = sms.split("#"); 

hasil akan berisi: 

hasil[0] berisi "BUDI" 

hasil[1] berisi "17" 


hasil[2] berisi "Indonesia Raya" 





substr() 


Mengambil kata tertentu dari suatu string. 

Contoh: 

var tglLahir = "17-08-1945"; 

var posisiAwal = 3; 

var jumlahKarakter = 2; 

var bulan = tglLahir.substr(posisiAwal, jumlahKarakter); // 


bulan akan berisi "08" 





substring() 


Mirip seperti substr() hanya saja parameter kedua diisikan 
dengan posisi karakter terakhir ditambah 1 dari kata yang 
mau diambil. 

Contoh: 

var tes = "Halo javascript"; 


var hasil = tes.substring(5, 9); // hasil akan berisi "java" 





toLowerCase() 


toUpperCase() 


Mengubah case dari suatu string. toUpperCase() akan 
membuat semua karakter berganti menjadi huruf kapital 


semua, demikian juga sebaliknya dengan toLowerCase(). 








trim() 





Menghilangkan karakter kosong (spasi, tab, enter dan 
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sejenisnya) di awal dan akhir suatu string. 
Contoh: 
var tes =" Java script "; 


var hasil = tes.trim(); // hasil akan bernilai "Java script" 





length() Menghitung jumlah karakter dalam suatu string. 
Contoh: 
var tes = "JS"; 


var hasil = tes.length(); // hasil akan bernilai 4 














Obyek Math 


Obyek untuk mengolah data dalam bentuk numerik di Javascript. 
































E Konstanta bilangan euler, sebesar 2.718 

Pl Konstanta nilai Pl, sebesar 3.14 

sin(x) Mencari nilai sin, cos atau tan dari x dalam radian. 

cos(x) 

tan(x) 

asin(x) 

acos(x) 

atan(x) 

ceil(x) Membulatkan nilai x keatas. 

floor(x) Membulatkan nilai x kebawah. 

round(x) Membulatkan nilai x. 

log(x) Mencari nilai log E dari x 

pow(x, p) Mencari nilai pangkat p dari x 

random() Menghasilkan bilangan random antara 0.0 - 1-0 
Contoh: 
var acak = Math.random(); // acak dapat saja bernilai 0.0379 

sqrt(x) Mencari akar pangkat 2 dari x 
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Obyek Array 

Obyek untuk mengolah data dalam bentuk kumpulan data (array) di Javascript. 
Fungsi/Konstanta | Penjelasan 

Length Konstanta untuk mengetahui jumlah elemen dalam suatu 


array. 
Contoh: 

var d = [2.3, 4.5, 6.7, 8.9]; 
alert(d.length); // hasilnya: 4 





join(penyambung) 


Menggabungkan semua elemen dalam satu string khusus. 
Parameter penyambung menentukan string yang akan 
digunakan untuk menghubungkan setiap elemen yang ada 
dalam array, apabila tidak diisi maka tanda ',' yang akan 
digunakan. 

Contoh: 

var d - (“bintang”, “aditya”, “cahaya'): 

var s - d.join(), // hasilnya: “bintang,aditya,cahaya” 


vart - d.join(“ dan "): // “bintang dan aditya dan cahaya” 








reverse() Membalik urutan dari elemen-elemen array. 

Contoh: 

var d - (“bintang”, “aditya”, “cahaya'): 

var s = d.reverse(); // hasilnya: (“cahaya”, “aditya”, “bintang”) 
indexOf() Mencari index dari suatu elemen dalam array. 


Contoh: 
var d - (“bintang”, “aditya”, “cahaya'): 


var pos - d.indexOf(“aditya”): // hasilnya: 1 








lastindexOf() 





Mencari index akhir dari suatu elemen dalam array. Prinsip 
kerjanya sama seperti indexOf() hanya saja, apabila ada 
lebih dari satu elemen yang ditemukan, yang diberikan 


adalah posisi elemen terakhirnya. 





Referensi untuk kelas-kelas lainnya dapat dilihat pada web berikut. 


http://www.w3schools.com/isref/ 
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c. Rangkuman. 
Dari kegiatan belajar diatas dapat dibuat kesimpulan bahwa : 
= Dalam Javascript kode program yang dihasilkan dapat dikelompok- 
kelompokkan menggunakan fungsi. 
= Setiap fungsi dapat digunakan untuk menyelesaikan satu kasus, prose 
atau rumus aritmatika tertentu. 
= Ada banyak obyek bawaan yang sudah dibuat oleh Javascript, 
diantaranya adalah String untuk pengolahan data alfanumerik, Math untuk 
menghitung rumus aritmatika, dan Array untuk mengolah data yang 


disimpan dalam array. 


d. Tugas. 
1. Buatlah fungsi untuk menghitung jumlah karakter, kata dan kalimat dalam 


satu data alfanumerik (string), dengan ketentuan sebagai berikut. 


Karakter disini adalah: huruf a-z (besar maupun kecil) dan angka 0-9 
Kata disini adalah: kumpulan karakter diatas tanpa spasi, * *. 


Kalimat disini adalah: kumpulan kata yang diakhiri dengan tanda titik, ‘.. 


Contoh penggunaannya: 

var data = “Kalimat 1. Kalimat 2. Kalimat 3”; 
var jmIKata = hitungJumlahKata(data); 
alert(jmIKata); // hasil: 6 

var jmlKalimat = hitungJumlahKalimat(data); 
alert(jmlKalimat); // hasil: 3 

var jmlKarakter = hitungJumlahKarakter(data); 
alert(jmlKarakter); // hasil: 24 


2. Buatlah fungsi untuk membaca nilai bilangan bulat dari 0 hingga 20, 


seperti contoh kasus berikut: 


var d = bacaBilangan(2); 
alert(d), // hasilnya: dua 


var e = bacaBilangan(12); 
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alert(e); // hasilnya: dua belas 
var f = bacaBilangan(20); 
alert(f); // hasilnya: dua puluh 


e. Tes Formatif. 

1. Apa yang dimaksud dengan fungsi? 
Mengapa pembuatan fungsi diperlukan dalam pengembangan program? 
Sebutkan aturan-aturan terkait penamaan fungsi yang benar? 


Apa yang dimaksud dengan parameter pada fungsi? 


от = 59 19 


Mungkinkah kita memberikan pernyataan return pada fungsi yang tidak 
memiliki nilai balik? Jelaskan. 


f. Lembar Jawaban Tes Formatif. 
LJ- 01 : 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 14 ini siswa diharapkan dapat : 
1) Mengetahui pemrograman berorientasi obyek pada web klien 
2) Memahami penerapan pemrograman berorientasi obyek pada web 


klien 


b. Uraian Materi. 

Pemrograman Berorientasi Obyek (PBO) 

Pemrograman berorientasi obyek adalah sebuah paradigma dalam 
pemrograman yang mengelompokkan fungsi, prosedur, variabel ataupun 
konstanta terkait dalam satu kesatuan (kelas) seperti obyek dalam dunia nyata. 
Obyek sendiri merupakan wujud dari kelas, secara umum dikenal dengan nama 
instan. Teknik-teknik dalam pemrograman ini merupakan pengembangan dari 
teknik sebelumnya seperti modularitas, polimorfisme, dan enkapsulasi. Saat ini 
ada banyak bahasa pemrograman yang telah mendukung pemrograman 
berorientasi obyek ini, seperti C++, CH, Java, Javascript, PHP, Python, Ruby, 
dan Objective C. 


Dalam PBO setiap program akan menyatakan kumpulan dari obyek dan bukan 
lagi kumpulan fungsi ataupun kumpulan baris kode. Pada PBO ini setiap obyek 
memiliki kemampuan untuk menerima pesan, memproses data dan mengirim 
data ke obyek lainnya. Setiap obyek dapat dilihat sebagai program sendiri yang 
memiliki peran dan tanggungjawab masing-masing. Pengembangan program 
dengan menggunakan teknik PBO ini populer dalam program berskala besar 


karena fleksibel dan memudahkan dalam perbaikan. 


PBO: Pemrograman Berbasis Prototipe 

Javascript menggunakan PBO dengan model pemrograman berbasis prototipe. 
Model ini tidak mengenal kelas, yang ada adalah obyek. Obyek dalam model ini 
dapat dimodifikasi secara runtime seperti penambahan variabel (properti) 
ataupun metode (fungsi/prosedur). Model ini juga dikenal dengan istilah 


pemrograman PBO tanpa kelas, berorientasi prototipe atau berbasis instan. 
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Javascript Object Oriented Programming 

Obyek Utama (Bawaan) 

Javascript memiliki banyak obyek bawaan seperti Math, Array, String dan Object. 
Setiap obyek dalam Javascript adalah instan dari obyek Object, sehingga 
memiliki semua properti dan metode yang ada. 


Obyek Buatan 

Javascript merupakan bahasa PBO yang menggunakan kata kunci function untuk 
mendefinisikan suatu kelas. Oleh karena itu, pembuatan kelas sama dengan 
pembuatan fungsi dalam Javascript. Berikut ini merupakan format yang dapat 


digunakan untuk mendefinisikan kelas pada javascript. 





Atau dalam bentuk yang lebih lengkap 





Hal yang dapat diperhatikan pada format diatas adalah namavar1 dan namavar2 


merupakan properti dari kelas tersebut. Pembuatan properti dari suatu obyek 
dilakukan dengan menambahkan kata kunci this di awal dari nama properti 
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tersebut, seperti diperlihatkan dalam format diatas. Sedangkan pembuatan 
metode atau fungsi dari obyek dilakukan dengan cara yang sama hanya dengan 
properti dengan menambahkan definisi fungsinya dengan menggunakan kata 
kunci function. 


Pembuatan obyek dari kelas yang telah didefinisikan diatas dapat dilakukan 
dengan menggunakan format berikut. 


Kemudian untuk mengakses properti ataupun metode yang dimiliki oleh suatu 
obyek dapat dengan menggunakan operator titik (.) setelah nama obyek diikuti 
nama properti atau metodenya. Mengenai aturan penamaan kelas dapat 
mengikuti aturan penamaan fungsi pada materi sebelumnya, contohnya 
ditunjukan dibawah ini. 
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Apabila pembuatan dilakukan dengan menggunakan format yang pertama, 
bentuk definisinya akan seperti berikut. 
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Dari contoh diatas dapat dilihat ada penggunaan kata kunci prototype pada 


obyek yang dibuat untuk menambahkan properti ataupun metodenya. 


c. Rangkuman. 

Pemrograman berorientasi obyek merupakan teknik pemrograman yang melihat 
suatu program sebagai kumpulan obyek yang memiliki properti dan metode yang 
saling berinteraksi satu sama lain melalui pengiriman pesan (data). Javascript 
merupakan bahasa yang tidak mengenal kelas atau bahasa PBO yang 
berorientasi prototipe atau instan. Dengan model ini memungkinkan program 
Javascript untuk mengolah obyek-obyek yang ada secara langsung, tanpa perlu 
mendefinisikan kelasnya. Javascipt menggunakan kata kunci function untuk 
mendefinisikan suatu obyek dan kata kunci property untuk memodifikasi suatu 
obyek dengan menambahkan atau mengubah definisi satu metode atau properti. 


d. Tugas. 
Buatlah program menggunakan teknik PBO untuk menyelesaikan perhitungan 


volume bangun ruang 3 dimensi berikut. 





Gambar dari wikipedia.org (piramid) dan kompasiana.com (honai). 


Ukuran dari masing-masing bangun ruang dapat ditentukan sendiri. 


e. Tes Formatif. 
1. Apa yang dimaksud dengan pemrograman berorientasi obyek? 
2. Jelaskan perbedaan PBO pada Javascript dengan bahasa PBO lainnya 
seperti C++ dan Java? 


3. Apa perbedaan antara PBO dengan pemrograman prosedural? 
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5. Apa manfaat yang diperoleh dari penerapan PBO dalam pengembangan 


4. Apa yang dimaksud dengan prototipe pada PBO? 
program berskala besar? 


f. Lembar Jawaban Tes Formatif. 
LJ- 01: 


Page | 186 


Pemrograman Web 





g. Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 15 ini siswa diharapkan dapat : 
1) Mengetahui bentuk penanganan interaksi user pada aplikasi 


2) Memahami penerapan teknik pengolahan interaksi user pada aplikasi 


b. Uraian Materi. 

Interaksi User 

Adanya interaktifitas dalam aplikasi akan membantu menarik minat pengguna 
untuk menggunakan aplikasi yang dikembangkan. Di banyak bahasa 
pemrograman pengolahan interaksi ini dikenal sebagai teknik penanganan event. 
Event dalam Javascript adalah sebuah kejadian interaksi antara user dengan 
halaman web. Bentuk interaksi ini dapat digambarkan seperti pada saat user 
melakukan klik pada tombol ataupun link, mengetik username dan password dan 


sebagainya. 


Event ini pada HTML ditambahkan dalam bentuk atribut dari elemen yang ada. 
Program javascript yang ditempatkan pada atribut tersebut akan dijalankan pada 
saat interaksi yang bersesuaian terjadi. Berikut ini merupakan daftar atribut yang 


dapat digunakan untuk mengolah interaksi user. 


Tabel 1. Daftar atribut event yang sering ditemui dalam dokumen HTML 


onclick Event ini terjadi saat user melakukan klik sekali atau dua kali 
ondblclick pada satu elemen HTML 
Elemen HTML yang umum memiliki atribut ini: button, 


document, checkbox, link, radio, select, submit, reset. 





onmousedown | Event ini terjadi saat user melakukan klik pada satu elemen 
HTML 


Elemen terkait: button, document, link, layer 








onmousemove | Event ini terjadi saat user menggerakan mouse diatas elemen 
HTML 
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Elemen terkait: button, document, link, layer 









































onmouseover | Event ini terjadi saat user menggerakan mouse ke atas elemen 
HTML 
Elemen terkait: button, document, link, layer 

onmouseout Event ini terjadi saat user menggerakan mouse keluar elemen 
HTML 
Elemen terkait: button, document, link, layer 

onmouseup Event ini terjadi saat user melepaskan klik pada elemen HTML 
Elemen terkait: button, document, link, layer 

onkeydown Event ini terjadi saat user sedang menekan tombol keyboard 
pada elemen HTML 
Elemen terkait: document, image, link, input, textarea 

onkeypress Event ini terjadi saat user menekan tombol keyboard pada 
elemen HTML 
Elemen terkait: document, image, link, input, textarea 

onkeyup Event ini terjadi saat user melepas penekanan tombol keyboard 
pada elemen HTML 
Elemen terkait: document, image, link, input, textarea 

onload Event ini terjadi dokumen atau frame telah ditampilkan oleh 
browser. 
Elemen terkait: document, image, layer, window 

onresize Event ini terjadi saat ukuran dari dokumen berubah 
Elemen terkait: document, image, layer, window 

onscroll Event ini terjadi saat user melakukan scrolling pada dokumen 
Elemen terkait: document, window 

onunload Event ini terjadi saat user menutup dokumen 
Elemen terkait: document, window 

onblur Event ini terjadi saat fokus pada elemen tersebut dipindahkan 
ke elemen lainnya 
Elemen terkait: button, checkbox, file upload, layer, password, 
radio, reset, select, submit, text, textarea, window 

onchange Event ini terjadi saat nilai elemen form berubah 





Elemen terkait: file upload, select, submit, text, textarea 
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onfocus Event ini terjadi saat elemen tersebut difokuskan oleh user 
Elemen terkait: button, checkbox, file upload, layer, password, 


radio, reset, select, submit, text, textarea, window 





onreset Event ini terjadi saat form di reset ke kondisi sebelum diisi 


Elemen terkait: form 





onselect Event ini terjadi saat user memiliki sebagian teks pada elemen 


Elemen terkait: text, textarea 








onsubmit Event ini terjadi saat form akan dikirim ke aplikasi server 


Elemen terkait: form 








Format penerapan kode Javascript pada atribut event diatas sebagai berikut : 


<tag atribut-event="kode javascript;” .. > .. </tag> 


atau untuk tag tanpa penutup. 


<tag atribut-event="kode javascript;” .. /> 


Contoh program penerapan event pada halaman web. 


<a href="http://kompas.com” onclick="alert (‘Link ini akan 





membuka halaman Kompas.com’);”>Link 1</а> 


Pada contoh diatas, apabila user melakukan klik pada Link 1, maka akan 
ditampilkan alert(). Selanjutnya pada contoh berikut ini sudah melibatkan fungsi 
di Javascript. Dimana apabila nilai dari input text berubah, maka alert() akan 


tampil dengan mengambil nilai yang diketikkan oleh user. 
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function sayHalo() { 
var nm = document.getElementById('nama') .value; 
alert ("Halo, " + nm); 

} 

SCI e 


<input type="text" id="nama" onchange="sayHalo();" /> 


Pernyataan document.getElementByld(‘id elemen’).value adalah perintah 


javascript untuk mengambil nilai input dari elemen form. 


Pengaksesan Obyek Pada Halaman Web 

Setiap elemen HTML yang ada dalam suatu dokumen web oleh Javascript 
diterjemahkan sebagai obyek HTML. Pada obyek HTML ini terdapat sejumlah 
fungsi, konstanta ataupun variabel yang dapat diakses untuk mengubah elemen 
HTML tersebut. Akses terhadap obyek HTML tersebut dapat dilakukan dengan 


menggunakan fungsi-fungsi berikut. 


Tabel 2. Fungsi untuk mengakses obyek HTML 


getElementByld(“id-elemen”) id-elemen disini digunakan untuk 
menunjuk nilai dari atribut id dari elemen 


yang mau diakses obyeknya. 





getElementsByTagName(“nama-tag”) | nama-tag disini digunakan untuk 
mengambil obyek berdasarkan nama tag 
HTML-nya 





getElementsByName(“nama”) nama disini adalah nilai dari atribut name 
dari elemen yang akan diakses. 
Umumnya diterapkan pada komponen 
dari form, seperti input, select, checkbox, 


dan komponen lainnya. 
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Ketiga fungsi diatas merupakan bagian dari obyek document. Sehingga obyek 
document perlu disertakan pada saat memanggil fungsi diatas. 
Contoh : penggunaan fungsi getElementByld() 





Pada contoh diatas ini apabila tombol Ambil nilai diklik, maka obyek input nilai 


akan diambil menggunakan fungsi document.getElementByld() dan selanjutnya, 
variabel value dari obyek nilai digunakan untuk mengambil data masukkan dari 
user agar dapat ditampilkan. 


a Browser - o EA 
12 Ambil nilai 
Davascript .. 27 
nilainya adalah 12 
оқ 


Gambar 14.1 Contoh hasil penggunaan fungsi getElementByld() 
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Contoh : penggunaan fungsi getElementsByNamel). 





Fungsi getElementsByNamel) sedikit berbeda dengan metode getElementByild(), 
dimana hasil dari metode ini adalah array obyek bukan obyek tunggal. Dengan 
hasil berupa array ini berarti untuk mengakses elemen pertama digunakan index 
O. Disisi lain, dengan hasil array ini dimungkinkan untuk menuliskan elemen 
HTML dengan nilai atribut name yang sama. Berikut ini merupakan contoh 
penggunaan fungsi getElementsByName() dengan elemen yang memiliki nama 
sama lebih dari satu. 
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Hasilnya: 


(= E - ° ш 
12 
34 JavaScript Al. ЕЙ 





i: l 
Gambar 14.2 Contoh hasil penggunaan fungsi getElementsByName() 


Selanjutnya untuk fungsi getElementsByTagName(), berikut ini diberikan contoh 


skripnya. 
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// menampilkan nilai pada input text kedua 


cbi be valme = Si = 825 


} 
— сс ot 


Hasil akhir dari skrip ini mirip dengan contoh sebelumnya, hanya cara mengambil 
nilainya yang berbeda. Oleh karena tombol juga dibuat menggunakan tag 
«input» maka nilainya dapat diakses menggunakan fungsi ini. Berikutnya untuk 
obyek input text yang kedua digunakan untuk menampilkan isi dari input text 
pertama dan input button. 


- = 
- Browser 


12 


Ambil nilai 


12 Ambil nilai 


Gambar 14.3 Contoh hasil penggunaan fungsi getElementsByTagName() 


c. Rangkuman. 
Dari kegiatan belajar diatas dapat dibuat kesimpulan bahwa : 
= Event merupakan konsep penting dalam pemrograman, karena dari 
konsep ini aplikasi dapat berinteraksi dengan user melalui berbagai input 
yang ada. 
= Event pada javascript dapat diterapkan pada semua elemen yang ada. 
Jenis interaksi yang diberikan oleh user adalah melalui perangkat input 


berupa mouse dan juga keyboard. 
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Dalam Javascript sudah disediakan sejumlah fungsi untuk mengakses 
data yang diberikan oleh user melalui elemen HTML, diantaranya adalah 
getElementByld(), getElementsByName() dan getElementsByTagName(), 
yang kesemuanya merupakan bagian dari obyek document. Selanjutnya 
dapat diolah sesuai hasil yang diharapkan. 


d. Tugas. 


1. 


Lakukan percobaan menggunakan fungsi pengaksesan diatas untuk 
mengambil nilai dari beberapa obyek HTML dan simpan hasilnya dalam 
tabel. 
a. Radio untuk memilih jenis kelamin L atau P. 
b. Checkbox untuk memilih warna kesukaan merah, jingga, kuning, 
hijau, biru, dan ungu. 
Select untuk memilih golongan darah 


d. Textarea untuk entri data alamat 


Lanjutkan jawaban dibawah ini untuk komponen lainnya. 


Radio 
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else { 
alert ("Kelaminnya adalah " + 
objKelamin[1].value) ; 
} 
} 
</script> 


Select 





Radio checked Untuk mengetahui 


apakah radio tersebut 
dipilih atau tidak. 
Hasil: 

True, jika dipilih 
False, jika tidak dipilih 


value Untuk mengambil nilai 





dari radio. 
Hasil: 
L/P, sesuai pilihan 


user. 




















2. Buatlah suatu program untuk menghitung luas dari panjang dan lebar 
yang diberikan oleh user pada input text? 

3. Buatlah program perhitungan index berat badan menggunakan 
javascript? 

4. Buatlah program untuk menampilkan jumlah karakter dan kata yang 


diketikkan oleh user pada sebuah input textarea? 


e. Tes Formatif. 


1. Apakah yang dimaksud dengan event? 
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2. Apakah kaitan antara interaktifitas suatu aplikasi dengan event di 


Javascript? 

3. Jelaskan metode-metode yang dapat digunakan untuk mengakses obyek 
HTML di Javascript? 

4. Jelaskan event-event yang berkaitan dengan keyboard? 

5. Apakah kelebihan dan kekurangan dari penggunaan fungsi 


getElementByld() yang dapat memanggil obyek tunggal dan bukan array? 


f. Lembar Jawaban Tes Formatif. 
LJ- 01: 
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Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 
Setelah mengikuti kegiatan belajar 16 ini siswa diharapkan dapat : 
1) Mengetahui sistem navigasi halaman web melalui kode program 


2) Memahami penerapan program navigasi pada halaman web 


b. Uraian Materi. 

Navigasi Halaman 

Navigasi secara umum dapat digunakan untuk menunjukkan perpindahan dari 
satu titik ke titik yang lain. Dalam hal ini perpindahan yang dimaksud adalah 
perpindahan dalam satu halaman ataupun antar halaman web. Wujud dalam 
halaman web yang tampak adalah dalam bentuk link (tekstual), tombol dan 
gambar (grafis). Selain menggunakan HTML, navigasi pada halaman web juga 


dapat diwujudkan dengan menggunakan program Javascript. 


Perancangan navigasi untuk suatu website dapat juga dikenal dengan istilah 
pembuatan sitemap. Penggambarannya dilakukan dengan terlebih dahulu 
menentukan halaman utama web, kemudian menentukan link-link apa saja dari 
yang ada di halaman tersebut dan mengaitkannya. Berikut ini merupakan salah 


satu contoh bentuk rancangan sitemap. 


pendidikan html 
galeri. html profil, him! 
pekerjaan htrnl 
software. html index.html 
portofolio html berita him! 
music. htm! 
kontak.himi 


Gambar 15.1 Contoh sitemap sebuah website 


Pembuatan sitemap ini dapat dilakukan dengan menggunakan aplikasi peta 
pikiran seperti Freemind, XMind ataupun sejenisnya. Sitemap ini nantinya dapat 
dijadikan panduan ataupun arah bagi programmer web dalam mengembangkan 
aplikasinya. Sedangkan untuk user dapat memberikan gambaran secara 


menyeluruh tentang web yang sedang dikunjungi. 
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Terdapat sejumlah metode yang dapat digunakan di Javascript untuk berpindah 


halaman ini, diantaranya adalah : 


window.location.href = “url”; Digunakan untuk menentukan halaman yang 
akan ditampilkan pada browser, melalui string url 


yang diberikan. 





window.location.assign(“url”); | URL halaman baru diberikan dalam bentuk 


parameter untuk fungsi ini. 





window.location.replace(“url”); | Mirip seperti assign(), bedanya browser tidak 
akan mengingat url sebelum ini, sehingga tidak 
akan ada perubahan apabila menekan back 
pada browser atau menjalankan metode 
history.back() untuk kembali ke halaman 


sebelumnya. 


Jadi apabila menginginkan halaman sebelumnya 


tetap ada gunakan fungsi assign(). 





window.history.back() Fungsi untuk menampilkan kembali halaman 
sebelumnya. Sama fungsinya dengan tombol 


back pada browser. 





window.history.forward() Untuk menampilkan halaman setelah saat ini 


apabila ada. 














Contoh: 
File: index.html 


<hl>Halaman Index</hl> 


<ul> 


<li 





onclick="window.location.href='profil.html'">Profil</li> 
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File: profil.html 





File: portofolio.html 





File: kontak.html 





Program diatas ini merupakan salah satu bentuk hasil dari sitemap yang 


dirancang diatas. Dimulai dari index.html berisikan link menu untuk mengakses 
halaman lainnya. Terdapat tiga fungsi navigasi yang diterapkan dihalaman ini. 
Kemudian masing-masing halaman profile.html, portofolio.html dan kontak.html 
terdapat menu untuk kembali ke halaman index.html. Hal yang membedakan 
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ketiga halaman tersebut adalah hasil dari pemilihan menu Kembali. Pada file 
profile.html dan portofolio.html ketika menu Kembali dipilih browser akan 
membuka halaman index.html. Hal ini karena browser merekam sejarah navigasi 
halaman sebelumnya. Sedangkan pada file kontak.html menu Kembali yang 
dipilih tidak akan membawa user ke halaman index.html. Ini dikarenakan 
rekaman jejak sejarah file index.html dihapus pada saat pemanggilan fungsi 


window.location.replace() oleh menu Kontak di file index.html. 


NAVIGASI DENGAN AJAX (MATERI TAMBAHAN) 

Bentuk lain dari navigasi ini adalah dengan menggunakan obyek AJAX pada 
Javascript. AJAX, Asynchronous Javascript and XML. AJAX bukan merupakan 
bahasa pemrograman baru, melainkan kumpulan kelas Javascript yang dapat 
digunakan salah satunya untuk menampilkan halaman lain tanpa merubah 


keseluruhan halaman saat ini. 


Dengan obyek ini perpindahan halaman dapat dilakukan tanpa menghilangkan 
halaman yang sedang dibuka saat ini. Ini perbedaan antara menampilkan 
halaman dengan AJAX dan cara sebelumnya. Dimana pada saat menunggu 
halaman yang akan ditampilkan, halaman saat ini tetap terlihat, karena 


prosesnya terjadi dilatar dan tidak terlihat oleh user. 


jQuery merupakan salah satu librari yang dapat digunakan untuk menerapkan 
AJAX ini dengan perintah-perintah yang lebih sederhana. Librari disini 
maksudnya adalah kumpulan kelas atau obyek yang didalamnya juga berisi 
fungsi, variabel dan konstanta. Dengan menyertakan librari ini dalam program 
akan dapat menambah kemampuan aplikasi sebagaimana fitur yang ditawarkan 


dalam librari tersebut. 


Website http://jquery.com berisi link untuk mendownload librarinya dan juga ada 
banyak tutorial yang diberikan yang dapat diikuti untuk penerapan jQuery pada 
pemrograman halaman web. Sampai saat buku ini ditulis jQuery saat ini telah 


sampai pada versi 2.0.3. 
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Berikut ini merupakan contoh penerapan librari ¡Query untuk menampilkan 
halaman lain menggunakan AJAX. Contoh program : 


File: halaman1.html 





File: halaman2.html 





Gambar 15.2 Tampilan halaman1.html yang memuat program AJAX ¡Query 
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hetp//localhost/ajantes/halaman1.htmi 


Halaman 2 akan ditampilkan dibawah ini 
menggunakan AJAX jOuery. 
Ini contoh halaman 2. 


Selamat datang di Halaman 2. 
Muat web: 





Gambar 15.3 Tampilan halaman 1. html setelah memuat halaman 2. html pada div 
dengan id hal2 


Dari hasil percobaan ini dapat dilihat bahwa perubahan hanya terjadi pada tag 
«div» dengan id hal2 dan tidak pada alamat URL di browser, yang tetap berada 
pada halaman 1. html. Skrip ini dapat dijalankan apabila ditempatkan sebagai 
aplikasi server menggunakan web server seperti Apache (dengan menginstall 
aplikasi XAMPP atau sejenisnya) atau dengan menambahkan argumen --allow- 
file-access-from-files pada eksekusi browser Google Chrome seperti terlihat pada 
tampilan berikut. 
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Gambar 15.4 Penambahan argumen eksekusi pada browser Google Chrome 


Setelah menambahkan argumen diatas, halaman HTML dapat dibuka kembali 
menggunakan browser Google Chrome yang sudah dimodifikasi ini. Hasilnya jika 
berhasil menambahkan argumen eksekusi diatas adalah sebagai berikut. 
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halaman1.htmi 


< с file///D:/DATA/halaman1.html 


Halaman 2 akan ditampilkan dibawah ini menggunakan AJAX jQuery 
Ini contoh halaman 2 


Selamat datang di Halaman 2 
Muat web 





Gambar 15.5 Halaman dengan librari AJAX pada browser Google Chrome 


c. Rangkuman. 
Dari paparan kegiatan menerapkan navigasi halaman web dapat dibuat 
ringkasan materi sebagai berikut : 
= Navigasi secara umum dapat digunakan untuk menunjukkan perpindahan 
dari satu titik ke titik yang lain. 
= Selain menggunakan HTML, navigasi pada halaman web juga dapat 
diwujudkan dengan menggunakan program Javascript. 
= Perancangan navigasi untuk suatu website dapat juga dikenal dengan 
istilah pembuatan sitemap. 
= Sitemap ini nantinya dapat dijadikan panduan ataupun arah bagi 
programmer web dalam mengembangkan aplikasinya. 
= Bagi user , sitemap dapat memberikan gambaran secara menyeluruh 
tentang web yang sedang dikunjungi. 
= jQuery merupakan salah satu librari yang dapat digunakan untuk 
menerapkan AJAX ini dengan perintah-perintah yang lebih sederhana. 


d. Tugas. 

Buatlah website mengenai profil masing-masing siswa dengan minimal memiliki 
halaman utama, biodata, foto, portofolio, dan sitemap. Terapkan aturan berikut 
pada aplikasi web yang dihasilkan: 
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- Ada menu navigasi pada setiap halaman, termasuk juga untuk back dan 


forward. 
- Menu navigasi ini dapat berupa link atau tombol. 
- Kesemua item menu navigasi diterapkan menggunakan metode-metode 


navigasi yang telah dijelaskan termasuk AJAX. 


e. Tes Formatif. 


1. Apa yang dimaksud dengan sitemap? 

2. Apa manfaat yang diperoleh user dengan adanya sitemap? 

3. Apa perbedaan antara penerapan metode window.location.assign() 
dengan window.location.replace()? 

4. Apa kelebihan dan kekurangan penerapan navigasi melalui skrip pada 
halaman web? 

5. Apa yang dimaksud denga AJAX? 


f. Lembar Jawaban Tes Formatif. 
LJ- 01: 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 17 ini siswa diharapkan dapat : 
1) Mengetahui teknik membuat format halaman web lebih dinamis 


2) Memahami penerapan teknik pembuatan halaman web klien dinamis 


b. Uraian Materi. 

Format Dinamis Dengan Javascript 

Selain karena adanya interaksi aplikasi web juga dapat lebih menarik apabila 
dilengkap dengan kemampuan untuk visualisasi setiap interaksi yang terjadi. 
Penerapan visualisasi interaksi ini dapat dilakukan dengan menggunakan CSS. 
Selain dapat digunakan untuk memodifikasi elemen HTML, Javascript juga dapat 
digunakan untuk mengubah style dari suatu elemen HTML. Pengubahan style ini 


dilakukan dengan menerapkan metode : 
obyectHTML.style.properti = “style baru”; 
obyekHTML disini merupakan obyek yang dihasilkan dari pemanggilan fungsi 


getElementByld(), getElementsByName() atau getElementsByTagName(). 


Sedangkan properti disini menunjukkan nama style CSS yang akan dimodifikasi 


dari obyek tersebut. Berikut ini beberapa daftar properti yang dapat digunakan. 





color | Menentukan warna dari elemen. 

Alternatif nilainya: 

a. format hexa (#XXXXXX), contoh: “#121212” 

b. nama warna, contoh: “blue” 

с. format desimal (rgb(r, g, b)), contoh: “rgb(100, 20, 
200)” 


backgroundColor | Menentukan warna latar belakang dari elemen. 





Alternatif nilainya sama seperti color diatas. 





visibility Menentukan status visual dari suatu elemen. 


Nilainya: “visible” / “hidden” 
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width Menentukan lebar dari suatu elemen. 
Alternatif nilainya: 

d. auto 

e. inherit 

f. persentase, contoh: “56%” 


g. pixel, contoh: “100px” 





height Menentukan tinggi dari suatu elemen. 





Pemberian nilainya sama seperti properti width. 











Daftar yang lebih lengkap untuk properti style yang dapat dimodifikasi dapat 
mengunjungi link berikut http://www.w3schools.com/jsref/dom obj style.asp. 


Contoh programnya diberikan sebagai berikut : 


Pengubahan warna 
<p style="background-color: orange; color: white">contoh 


halaman web yang menampilkan perubahan warnax/p» 


Sci 

var par = document .getElementsByTagName ("р") [0]; 
par.style.backgroundColor = "red"; 

</script> 


ү % 





Gambar 1. Perubahan warna latar suatu paragraf melalui Javascript 


Pada contoh diatas dapat dilihat bahwa paragraf yang sebelumnya memiliki 
warna latar oranye diganti menjadi merah melalui skrip javascript. 
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Pengubahan ukuran teks area 
<textarea RON style="width: 100px; height: 
100px;">contoh halaman web yang menampilkan perubahan 


ukuran</textarea> 


SiC 1a No tee 





var info - document.getElementById ("info"): 
T су Кек AO E 


Sa 


Halaman web diatas ini apabila ditampilkan akan mengubah ukuran lebar dari 
obyek HTML dengan id info menjadi 200px. Perlu diketahui disini bahwa nilai 
200px ditambahkan ke properti width dari style obyek info dengan menggunakan 


tanda kutip. Hasilnya seperti berikut ini. 


contoh halaman web yang 
menampilkan perubahan 
ukuran 





Gambar 2. Hasil perubahan ukuran lebar dari obyek HTML melalui Javascript 


Pengubahan penampakan suatu komponen 
<button onclick="tampilkanInfo()">Tampilkan Info</button> 
<button onclick="sembunyikanInfo () ">Sembunyikan 


Info</button> 


<p id="info">contoh halaman web yang menampilkan perubahan 


penampakan</p> 
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Gambar dibawah ini merupakan gambar yang menunjukkan bahwa apabila 
tombol Sembunyikan Info ditekan akan menyebabkan informasi pada paragraf 
akan disembunyikan seperti ditunjukan pada gambar bagian kanan, demikian 


juga sebaliknya apabila tombol Tampilkan Info ditekan. 





Gambar 3. Perubahan penampakan obyek HTML melalui Javascript 


c. Rangkuman. 

Javascript selain dapat digunakan untuk memodifikasi data-data yang tersimpan 
pada obyek HTML dapat juga digunakan untuk memodifikasi tampilan dari obyek 
tersebut. Ini dapat dilakukan melalui properti style yang dimiliki oleh setiap obyek 


HTML yang diakses melalui Javascript. 


d. Tugas. 
1. Kembangkan program pengubah penampakan pada contoh diatas 
sehingga apabila tombol Sembunyikan Info ditekan, tombol Tampilkan 
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Info ditampilkan dan tombol Sembunyikan Info disembunyikan juga 
selain menyembunyikan paragraf. Demikian juga sebaliknya untuk tombol 


Tampilkan Info. 


2. Buatlah program untuk memilih warna secara acak dari suatu kumpulan 
warna dan menerapkan warna tersebut pada teks yang juga dipilih secara 
acak dari suatu kumpulan teks. Contoh hasilnya dapat dilihat pada 


gambar berikut. 


PURPLE 


KUNING 





e. Tes Formatif. 
1. Apa yang dimaksud dengan format dinamis pada halaman web klien? 
2. Sebutkan properti-properti yang dapat diakses pada style dari suatu 
obyek HTML? 
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3. Apa perbedaan antara properti style pada Javascript dengan CSS yang 


dapat diamati? 

4. Mungkinkah memodifikasi style dari suatu obyek HTML menggunakan 
CSS yang dilakukan melaliu Javascript? Menggunakan kode CSS yang 
diterapkan melalui Javascript ke suatu obyek HTML. 


f. Lembar Jawaban Tes Formatif. 
LJ- 01: 
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=. 





Lembar Kerja Siswa. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 18 ini siswa diharapkan dapat : 
1) Mengetahui pustaka eksternal pada skripting halaman web 


2) Memahami penerapan pustaka eksternal pada halaman web 


b. Uraian Materi. 

Penerapan Pustaka Eksternal 

Selain menyediakan pustaka bawaan, pada pemrograman Javascript juga 
dimungkinkan untuk menggunakan pustaka dari pengembang (programmer) 
Javascript lainnya. Pustaka eksternal sebenarnya adalah program Javascript 
seperti umumnya yang dikembangkan oleh perorangan atau instansi agar dapat 
digunakan oleh orang atau instansi lainnya. Ada banyak pustaka Javascript yang 
telah dikembangkan, seperti Dojo, Ext JS, YUI, dan jQuery. Bentuknya ada yang 
bersifat terbuka dan tertutup tergantung dari pengembangnya. Adanya 
penambahan pustaka eksternal ini akan dapat menambah fitur dari halaman web 
yang dihasilkan. Selain itu juga dapat memberikan kemudahan dalam 
pengembangan karena adanya penyederhanaan sejumlah operasi umum dalam 
Javascript, seperti fungsi-fungsi untuk mengakses obyek ataupun menjaga 


kompatibilitas antar browser. 


Berikut ini format perintah yang dapat digunakan untuk menyertakan pustaka 


eksternal tersebut ke dalam halaman web. 
<script src="lokasi/file/pustaka.js”></script> 
Sebagai contoh, apabila menggunakan jQuery dengan file pustakanya 
jauery/jguery.min.js dan berada pada lokasi yang sama dengan aplikasi webnya, 


maka penyertaannya dapat menggunakan perintah. 


<script src="jquery/jquery.min.js”></script> 
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Pada pembelajaran kali ini pembahasan pustaka eksternal akan difokuskan pada 


penerapan pustaka jQuery. 


jQuery saat ini telah sampai pada rilis 1.11.0 untuk yang versi 1 dan 2.1.0 untuk 
versi 2. Pustaka ini dapat didownload pada alamat http://jguery.com. Ini 
merupakan salah satu pustaka yang banyak diterapkan saat ini dan memiliki 
sejumlah turunan, diantaranya adalah jQuery Ul, jQuery Mobile dan Twitter 
Bootstrap. Perkembangan yang pesat dari jQuery ini dimungkinkan karena 
sifatnya yang terbuka. Keterbukaannya ini memungkinkan banyak programmer 
Javascript untuk berkontribusi mengembangkan fitur-fitur yang ada pada pustaka 


ini. 


Melalui jQuery permasalahan kompatibilitas aplikasi antar web browser yang 
berbeda-beda dapat diatasi, seperti pada contoh kasus penerapan AJAX pada 
kegiatan belajar sebelumnya. Beberapa fitur yang dapat dimanfaatkan dari 
pustaka ini adalah manipulasi obyek HTML, penanganan event dan AJAX. 
Berikut ini merupakan beberapa contoh penerapan pustaka jQuery terkait fitur- 


fitur diatas. 


MANIPULASI OBYEK HTML (DOM Traversal) 
Mengakses obyek HTML melalui tag 


a AA N 














БЕСІК іе ее 





етае а а Е ИЕ е тасрав 





КЕ с=с р > 
. S (document) .ready (function () í 
la ета оао О оо И) 
}); 
. </script> 


oo -1 dD 0 SF W М 


Perintah pada baris 5 dan 7 pada skrip diatas digunakan sebagai perintah jquery 
untuk menangani event ready dari dokumen HTML. Event ready adalah event 


yang dikirimkan pada saat dokumen selesai di tampilkan oleh browser. 
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dengan tag div, $ (`div’ ), dan mengisinya dengan HTML <ul>info 2</u>. 


Mengakses obyek HTML melalui atribut id 











om Meli 





ре re ua Cl tan Е Е етае ара 


J. E > 
St 
seinen 
erhal > 


oo An oO FSF шо м 





S (document) .ready (function () ( 


5(' 


КИ; 


ЖАША @ ОША КОЕ ЕШ Tee: 


2 7 тезеле 


Program Javascript pada contoh diatas ini mirip dengan contoh sebelumnya, 


bedanya pada baris 6, obyek HTML pada contoh ini diakses melalui atribud id 


yang ditambahkan pada tag div. Penunjukkan atribut id oleh jQuery dilakukan 


dengan menambahkan tanda pagar (#) diawal id dari tag yang akan diakses. 


Penerapan atribut id tidak hanya dapat diberikan pada tag div namun juga untuk 


tag lainnya. Apabila dijalankan hanya tag dengan id info2 yang akan berubah 


tampilannya. Seperti ditunjukkan pada gambar berikut. 


m» a 
= сзеуу 
info | 


info 2 


Mengakses obyek HTML melalui atribut class 


lo <6l 
2, «6: 
Jo CECIEL 
4 
5 
6 


“AS Os 


AV 





LV 





Sl 


EA 

class="info2">info 2</div> 

ре атс=" 1 шегу se serip 
(ӨЛЕ > 


. S (document) .ready (function () { 


ЕЕ ia о AO) 


Page | 223 


Pemrograman Web 








Apabila program ini dijalankan akan memberikan tampilan yang sama pada 
contoh sebelumnya. Kalau pada contoh sebelumnya atribut id ditunjuk dengan 
menggunakan tanda #, disini penunjukkan kelas dilakukan dengan menggunakan 
tanda titik (.) diawal nama kelasnya. 


PENANGANAN EVENT 
Pemberian event onclick pada obyek HTML 





Pada skrip ini penambahan event onclick dilakukan pada obyek dengan id info2, 


yakni tag div. Skripnya ditunjukkan pada baris 6-8. Apabila tag tersebut diklik 
maka akan ada alert yang ditampilkan. Hasilnya dapat dilihat pada gambar 
berikut. 
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<b>info 2</b> 


OK 





c. Rangkuman. 

Penambahan pustaka eksternal pada skripting halaman web dapat memiliki 
sejumlah nilai tambah. Selain adanya tambahan fitur pustaka eksternal seperti 
jQuery juga dapat memudahkan dalam memprogram HTML menggunakan 
Javascript. jQuery merupakan salah satu pustaka eksternal yang banyak 
digunakan saat ini karena bersifat terbuka dan memiliki banyak fitur dan juga 
pustaka turunan. 


d. Tugas. 
1. Buatlah program untuk melakukan perhitungan operasi aritmatika 
sederhana berikut ini (1 operator dan 2 operand) melalui penggunaan 
librari eksternal jQuery dan pustaka bawaan Javascript. Contoh hasil 


akhirnya sebagai berikut. 
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2. Buatlah program untuk pencarian array dengan kondisi berikut. 

a. Array yang digunakan adalah Jan, Feb, Mar, Apr, Mei, Jun, Jul, Agu, 
Sep, Okt, Nop, Des. 

b. Inputnya adalah dua bulan terpilih dari data diatas. 

c. Outputnya adalah deretan bulan dari bulan pertama dan kedua yang 
ditentukan pada opsi b, dengan urutan sesuai posisi bulan pada 
array, contohnya dengan input bulan pertama Mar dan bulan kedua 
Jul, maka outputnya adalah Mar, Apr, Mei, Jun, Jul. 


e. Tes Formatif. 
1. Apa yang dimaksud dengan pustaka eksternal? 
2. Jelaskan apa saja metode yang dapat digunakan oleh pustaka jQuery 
dalam mengakses obyek HTML dalam suatu halaman web? 


f. Lembar Jawaban Tes Formatif. 
LJ- 01 : 
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g. Lembar Kerja Siswa. 
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